1

我基本上是在开发一个插件，它动态生成表行以在定义的页面上显示内容，生成时我希望它在每一行上显示一个按钮，单击时激活Ajax请求，我尝试附加一个ID并执行jQuery onClick 执行此操作，但它没有显示我的测试alert()

这是我正在使用的jQuery代码：

jQuery(document).ready(function(){

    jQuery("#submit").click(function(event) {

            //Stop the form processing
        event.preventDefault();

            //Get the username value
        var Username = jQuery('#username').val();

        jQuery.ajax({
            type: "GET",
            crossDomain: true,
            url: apiURL + "video/" + Username + "/views/",
            success: function(data) {
                Parsed = jQuery.parseJSON(data);
                jQuery.each(Parsed.user_media, function(i,v){
                    jQuery("#results").append("<tr><td><button type='submit' id='addtoPlaylist'>Add to Playlist</button></td></tr>");
                });
            },
        });

    });

    jQuery("#addtoPlaylist").click(function(event) {
        alert('Working!');
    });
});

一切都很完美，例如Ajax调用和返回表行，只是当我尝试使用.click()基于<button></button>它时，它似乎没有激活，也没有向控制台抛出任何错误。

4

6 回答 6

3

发生这种情况是因为您在准备好文档时添加了链接监听。此时您的 ajax 调用尚未触发，并且页面中不存在该元素。您必须创建一个单独的函数并在 ajax return 语句中调用它。请注意，不同的按钮必须有不同的 id。

解决方案应该是这样的

jQuery(document).ready(function(){

jQuery("#submit").click(function(event) {

        //Stop the form processing
    event.preventDefault();

    var addtoPlaylist = function(){
         alert('Working!');
    }



        //Get the username value
    var Username = jQuery('#username').val();

    jQuery.ajax({
        type: "GET",
        crossDomain: true,
        url: apiURL + "video/" + Username + "/views/",
        success: function(data) {
            Parsed = jQuery.parseJSON(data);
            jQuery.each(Parsed.user_media, function(i,v){
                jQuery("#results").append("<tr><td><button type='submit' id='addtoPlaylist'>Add to Playlist</button></td></tr>");
                 jQuery("#addtoPlaylist").click(function(event) {
                          addtoPlaylist();
                  });
            });
        },
    });

});

});

于 2013-07-15T10:00:04.757 回答
1

尝试这个

jQuery("#results").on("click", "#addtoPlaylist", function(event) {
    alert('Working!');
});
于 2013-07-15T09:58:23.227 回答
0

对生成的元素使用 jQuery事件委托：

$("#results").on('click','#addtoPlaylist',function(){
   alert('clicked');
});
于 2013-07-15T09:57:19.020 回答
0

尝试

$("#addtoPlaylist").on('click',function(event) {
        alert('Working!');
    });
于 2013-07-15T09:57:29.490 回答
0

我更喜欢在未来的元素上使用 jQuery.delegate。

jQuery("body").delegate("#addtoPlaylist","click",function () {
    alert("delegate works fine!");
})
于 2013-07-15T10:05:45.840 回答
0

我建议不要使用委托事件处理程序，而是使用 jQuery 以正确的方式创建元素：

jQuery(document).ready(function($){
    $("#submit").closest('form').on('submit', function(event) {
        event.preventDefault();
        var Username = $('#username').val();

        $.ajax({
            type: "GET",
            crossDomain: true,
            url: apiURL + "video/" + Username + "/views/"
        }).done(function(data) {
            var Parsed = $.parseJSON(data);

            $.each(Parsed.user_media, function(i,v){
                var tr  = $('<tr />'),
                    td  = $('<td />'),
                    btn = $('<button />', {type:'submit',
                                           id  :'addtoPlaylist',
                                           text:'Add to Playlis',
                                           on:{
                                               click: function() {
                                                   alert('Working');
                                               }
                                           }
                           });

                $("#results").append( tr.append(tr.append(button)) );
            });
        });
    });
});

请注意，您正在附加多个具有相同 ID 的元素。

于 2013-07-15T10:14:02.013 回答