Question

伙计我有2个问题，我认为这些问题在某种程度上与我有关。第一：

这两者有什么区别：

$(document).on('click','#someselector', function() {

  //do something

});

vs this

$('#selector')on('click', function(){
  /do something
});

有时两者都有效，有时却没有。

第2号问题：

我创建了一个jQuery UI对话框，如下所示：

function this_dialog(id) {

    $("#div-id-for-the-dialog").dialog({
        autoOpen            : false,
        modal               : true,
        draggable           : false,
        width               : 400, 
        buttons         : [{ 
            id      : id,
            text    : 'Ok' 
        },{  
            text    : 'Cancel',
            click   : function () { 
                $("#div-id-for-the-dialog").dialog('close');
            }
        }]   
    });  

}

正如您所看到的，id被传递给函数，许多人将调用此对话框并将唯一ID传递给它。然后，ID将仅分配给Ok按钮。

所以当我调用这个函数来加载一个独特的对话框时：

add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");

当我按下此代码时确定：

$(document).on('click','#my-unique-dialog-id', function () {
  //Do some ajax call here
});

我收到了这个JS错误：TypeError: s is undefined 但是ajax很成功。我只是想知道那个错误是什么。

所以当我说它与第一个问题有关时，因为当我用这个替换点击代码时：

$('#my-unique-dialog-id').on('click', function () {
  //Do some ajax call here
});

它不再起作用了。

由于

Answer 1

$(document).on('click', 'someselector', function() ...);

是委派语法。它允许您将处理程序绑定到执行代码时可能不存在的元素。参见：

Event binding on dynamically created elements?

$('someselector').on('click', function() ...);

仅在执行此代码时将处理程序绑定到与选择器匹配的元素。

Answer 2

我将第一个答案标记为正确，因为我知道我没有提供足够的信息来调试第二个问题，但如果有人可能遇到同样的错误，我发现了原因。所以当你初始化你的jQuery UI对话框时：

function this_dialog(id) {

    $("#div-id-for-the-dialog").dialog({
        autoOpen            : false,
        modal               : true,
        draggable           : false,
        width               : 400, 
        buttons         : [{ 
            id      : id,
            text    : 'Ok' 
        },{  
            text    : 'Cancel',
            click   : function () { 
                $("#div-id-for-the-dialog").dialog('close');
            }
        }]   
    });  

}

确保包含按钮的点击事件，如下所示：

function this_dialog（id）{

$("#div-id-for-the-dialog").dialog({
    autoOpen            : false,
    modal               : true,
    draggable           : false,
    width               : 400, 
    buttons         : [{ 
        id      : id,
        text    : 'Ok',
        click   : function () {
           //include the click event, even if you have nothing to put here.
        }
    },{  
        text    : 'Cancel',
        click   : function () { 
            $("#div-id-for-the-dialog").dialog('close');
        }
    }]   
});

}

放置＆＃39;文件＆＃39; vs＆＃39;选择器本身＆＃39;在jQuery？

2 个答案: