如何在type="text/template"的定义模板中加入js方法

最新推荐文章于 2024-04-26 16:47:03 发布

suking-php

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.9k

点赞数 4

分类专栏： JavaScript 文章标签： javascript templates

本文链接：https://blog.csdn.net/qq_41293288/article/details/104512761

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先要清楚javascrip type类型为 text/template 的作用，它相当于定义一个模板，如果没有使用html（）方法的话，是显示不出来的，在js里面，经常需要使用js往页面中插入html内容，例如：

var name = 'suking';
$('#d').append('<div class="t">' + name + '</div>');

如果html简短还好，但是遇到大段的，如登录弹框什么的，直接用字符串存储会很不方便，不光要处理单引号，还需要用到很多 + 号把字符串连接起来。

而给<script>设置type="text/template"，在里面写入html的好处是标签里的内容默认不会被执行，也不会显示在页面，而且可以放置除script标签以外的所有标签，又能保证浏览器不去执行它导致报错。使用时可以通过另一个script获取，然后再通过相关的模板工具进行处理，插入到页面中。这样就把大段的html操作从js里分离了。实例：

<body>
    <div id='detail'></div>
</body>
<script type="text/template" id="quickLogin">
    <form method="post" id="login_form" class="login_form">
        <div>
            <p>Email：</p>
            <input type="text" id="email" name="name" value="" />
        </div>
        <div>
            <p>Password：</p>
            <input id="user_pwd" type="password" name="password"  value="" />
        </div>
        <input type="submit" value="Log In" />
    </form>
</script>
<script language="javascript">
// Jquery 写法
    $('#detail').append($('#quickLogin').html());
// JavaScript 写法
    var show = document.getElementById("detail");
    var html = document.getElementById("quickLogin");
    show.innerHTML = html.innerHTML;
</script>

重点来了，当我们想将form表单用ajax提交又该怎么写了，我们知道script内不可以再写入script标签，只能另写一个script，但当我用正常的方法写的时候却发现js并不生效，点击submit并不能触发下面的方法。

$('#login_form').submit(function(){
    // 执行的ajax方法等
});

这是因为，上面的写法是页面加载时绑定事件，可这个时候我们的登录页并还没有加载，是等js触发后才插入的html页面，所以上面的方法并不能绑定到login_form。应该选用会时实监听绑定事件的方法，正确写法如下：

$(document).on('submit', '#login_form', function(e) {
    e.preventDefault();
    // 执行ajax等方法
});

suking-php

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
如何在type="text/template"的定义模板中加入js方法

首先要清楚javascrip type类型为 text/template 的作用，它相当于定义一个模板，如果没有使用html（）方法的话，是显示不出来的，在js里面，经常需要使用js往页面中插入html内容，例如：var name = 'suking';$('#d').append('<div class="t">' + name + '</div>...
复制链接

扫一扫