CODEWITHSUNDEEP
jquerywordpress
Curtis
Curtis

Reputation: 2704

.click() not working in WordPress Plugin

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 :

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.

Upvotes: 1

Views: 3598

Answers (6)

adeneo
adeneo

Reputation: 318252

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.

Upvotes: 0

Rameez SOOMRO
Rameez SOOMRO

Reputation: 1539

i prefer to use jQuery.delegate on future elements.

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

Upvotes: 0

rvt
rvt

Reputation: 227

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

});

});

Upvotes: 3

Manoj Yadav
Manoj Yadav

Reputation: 6612

Try this

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

Upvotes: 1

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

Try 

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

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Use jQuery event delegation for generated elements:

$("#results").on('click','#addtoPlaylist',function(){
   alert('clicked');
});

Upvotes: 0

Related Questions