.click() not working in WordPress Plugin

3 Views

I’m basically developing a plugin that generates table rows dynamically to display content on a defined page, when generating I want it to display a button on each row that actives an Ajax request when clicked, I’ve tried appending an ID and doing the jQuery onClick to perform this, yet it’s not showing my test alert()

Here’s the jQuery code I’m using :

Read More
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!');
    });
});

Everything is working perfect as such as the Ajax calls and returning the table rows, It’s just when I’m trying to utilise the .click() based on the <button></button> it just doesn’t seem to activate nor throw any errors into console.

Post Views: 3

Related posts

Leave a Reply

6 comments

  1. That’s happened because you’re adding link listen at document ready. At this time you’re ajax call hasn’t fired yet and the element don’t exist in page.
    You must create a separate function and call it in ajax return statement.
    Notice that different buttons must have different ids.

    The soluiton should been somethingh like

    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();
                  });
            });
        },
    });

});

    });

  5. i prefer to use jQuery.delegate on future elements.

    jQuery("body").delegate("#addtoPlaylist","click",function () {
    alert("delegate works fine!");
})

  6. I’ll suggest not using delegated event handlers, but instead create the elements the proper way with 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)) );
            });
        });
    });
});

    and note that you are appending multiple elements with the same ID.