Jquery事件委托问题

Question

任何人都可以建议我在哪里出错吗？ news_active是一个静态div，其他一切都通过ajax调用加载，没有任何东西被触发警报，相当难倒？！

$('#news_active').load('ajax.php', function() {
    // Delete news active
    $('#news_delete').on('click', function() {
        var vNid = $('#news_delete').attr('data-nid').val();
        alert(vNid);
        //$('#news_active').load('ajax.php?nid='+vNid);
    });
});

按钮看起来像这样，有多个按钮加载了不同的data-nid值：

<button id="news_delete" data-nid="1">Delete</button>

Answer 1

您应该使用data()方法：

var vNid = $('#news_delete').data('nid');

或者只是没有val() attr('data-nid') val() 。

val()试图获取Element.value属性，而你没有button 。

Answer 2

由于news_delete是动态加载的，因此您需要使用event delegation来注册事件处理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#news_active').on('click', '#news_delete', function(event) {
    var vNid = $('#news_delete').data('nid');
    alert(vNid); 
});

此外，在代码中获取data-nid属性值的方法也不正确。

使用这个：

var vNid = $('#news_delete').attr('data-nid');  // No need of .val() here
alert(vNid);

或者只是使用.data()

var vNid = $('#news_delete').data('nid');  
alert(vNid);

Answer 3

var vNid = $('#news_delete').attr('data-nid').val(); //remove the value it 
                                              // will return the value of button

改为

var vNid = $('#news_delete').attr('data-nid');