CODEWITHSUNDEEP
javascriptjqueryhtml
WebDevDanno
WebDevDanno

Reputation: 1122

jQuery get data attribute on click not working

I have a script that will append to two places on my web application. One is a list item and the other is a hidden field on a HTML form (which I process the data in a PHP service file).

However, I want that if a user clicks the 'x' icon that all the elements are removed that have the same ID.

I have a good idea how to do this but my script below doesn't even log the ID. The .control block is giving me the issue. The #add code block successfully appends the HTML.

Am I missing something obvious?

$("#add").click(function() {

    // RENDER LIST
    var playerList = ""; //
    playerList += "<li class='selection'>" + $("#player").val() + "<i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'> </i>" + "</li>";

    $(playerList).appendTo("#playerList");

    // ADD GUID TO SUBMISSION VALUES
    var playerHTML = "";
    playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

    $(playerHTML).appendTo("#selected-players");

    // CLEAR INPUT FIELD
    $("#player").val('');
});

$(".control").click(function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

Upvotes: 0

Views: 6792

Answers (3)

Jenson M John
Jenson M John

Reputation: 5689

The click() binding you're using is called a direct binding which will only attach the handler to elements that already exists. It won't get bound to elements created later. To do that, You'll have to create a "delegated" binding by using on() method.

Eg.

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    </head>
    <body>

        <div id="playerList">playerList</div>

        <div id="selected-players">selected-players</div>

        <a href="#" id="add">Add</a>

    <script>

        $(document).ready(function(){

          $("#add").click(function() {

            // RENDER LIST
            var playerList = ""; //
            playerList += "<li class='selection'>Dynamic LI " + $("#player").val() + "<i class='fa fa-close control' data-id='sample-data-id " + $("#playerGUID").val() + "'> <b>iVal-Click Here</b> </i>" + "</li>";

            $(playerList).appendTo("#playerList");

            // ADD GUID TO SUBMISSION VALUES
            var playerHTML = "";
            playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

            $(playerHTML).appendTo("#selected-players");

            // CLEAR INPUT FIELD
            $("#player").val('');
        });

        $("#playerList").on("click", ".control", function() {
            $targetID = $(this).attr('data-id');
            console.log("Selected ID:" + $targetID);

            // REMOVE WILL COME HERE
        });

        });

    </script>   

    </body>
    </html>

Upvotes: 1

apokryfos
apokryfos

Reputation: 40673

$(".control") doesn't exist at the time you bind the click event. You will need to delegate the event like so:

$(document).on("click", ".control", function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);
   // REMOVE WILL COME HERE
});

What happens here is that jQuery will bind a listener on the document (which always exists) rather than the .control which will not exist until you create it via a click to the #add. That way if can catch events on elements with class control even if the elements themselves were added later.

Check jQuery.on under Direct and delegated events for more details.

Note: Instead of using $(document) you can bind the event on any element which will be a parent of .control and is available when you bind the event (e.g. body). Ideally you'd want to bind it to the closest parent element which is present when the document is loaded.

Upvotes: 2

Rani Thakur
Rani Thakur

Reputation: 69

Try .on bind event instead of .click

$(".control").on("click",function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

Upvotes: 1

Related Questions