Question

我想使用jquery .on()来执行AJAX

无论如何，我测试下面的两个方法，它们都工作了我想知道他们之间的区别是什么？两种方法都正确吗？

<script type="text/javascript">
/*method 1*/
/*$(document).on('submit', '.login-form', function(){ */
$(document).on('click', '.searchtitle', function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});
/*method 2*/
$(".searchtitle").on('click',   function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});
</script>

test.html
<form action="" method="post"  class="searchtitle">
    {% csrf_token %}
    search activity :<input type="text" name="title">
    <button type="button" class="btn .btn-sm btn-success" id="search">submit</button>
</form>

Answer 1

方法二因性能原因而更好，因为您限制了每次点击按钮时需要进行的检查范围。

第一种方法不比现已弃用的live委托更有效，但如果您无法缩小需要针对点击事件进行监控的区域范围，则必须采用这种方法。

Answer 2

案例 - 1

/*method 1*/
$(document).on('submit', '.login-form', function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});

这是事件委托。如果在提交文档中的所有内容时触发它，并检查目标是否有一个类.login-form，那么请完成剩下的工作。

您可以阅读有关event delegation in jquery here的更多信息。

案例 - 2

/*method 2*/
$(".searchtitle").on('click',   function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});

这是将事件附加到特定DOM元素。它不会触发文档上的所有提交。但仅限于特定元素。

Answer 3

第一个称为事件委派，如果您的.searchtitle元素添加到DOM 以后，

第一个将起作用（新添加的元素具有事件处理程序）。

＆＃13;

$('body').on('click', 'p', function (e) {
    $(this).css('background', 'yellow');
});

$('button').on('click', function () {
    $('<p></p>').html('Hello').prependTo('body');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Hello</p>
<p>Hello</p>

<button>Add Element</button>

＆＃13;

但第二个赢了（新添加的元素没有任何事件处理程序）。

＆＃13;

$('p').on('click', function (e) {
    $(this).css('background', 'yellow');
});

$('button').on('click', function () {
    $('<p></p>').html('Hello').prependTo('body');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Hello</p>
<p>Hello</p>

<button>Add Element</button>

＆＃13;

jquery的用法：$（document）.on（）

3 个答案:

案例 - 1

案例 - 2