Question

HTML CODE：

<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>

JQUERY CODE：

$(function() {
   $("#sortable1 li").each(function()
   {
        $(this).on("click",make($(this)));
   });

   function make($li)
   {
        alert("hello");
   }
});

小提琴：

http://jsfiddle.net/gztRq/433/

当我操作小提琴时，它会自动显示五个列表项的提醒。实际上我已经为列表项绑定了点击事件，因此无论何时单击列表，它都需要调用该函数。

但为什么上面的“make”功能在点击列表之前触发了五次。单击列表项后没有任何反应。有什么问题？

当我在线编写功能代码时，一切都按预期工作。

工作代码：

 $("#sortable1 li").each(function()
 {
    $(this).on("click",function()
    {
      alert("hello");
    });
 });

正确的行为是什么？

Answer 1

完全删除$.each()循环，然后使用：

$('#sortable1').on('click', 'li', function() {
    alert("Hello"); // Or make($(this)); if you still want that extra function
});

JSFiddle demo

Answer 2

你打电话给你的功能，不要添加“（”，“）”。只写名字功能（是参考）。并且this已经为事件函数定义。 http://jsfiddle.net/gztRq/437/

$(function() {    
   $("#sortable1 li").each(function() {
       $(this).click(make);
   });
   function make() {
        alert("hello "+$(this).text()); 
   }
});

Answer 3

您应该使用：

 $(this).on("click",function(){make($(this))});

<强> Demo

Answer 4

试试这个，

$("#sortable1 li").click(function(){
     make($(this));
});

Answer 5

你可以尝试：

$(document).on("click","sortable1 li",function(){

});

将click事件绑定到jquery中的列表项的正确方法

5 个答案: