jquery not function after click row

Question

I have problem. It look piece of cake. But i already works on it almost 3 hours and I don't know what happen. No error but it don't show even alert.

Below is jquery script. The 1st function works successfully. But the 2nd is not.

$("#btnKeyword").on("click",function(){

    var param = document.getElementById('inputKeyword').value;

    $.ajax({
        //type: "POST",
        url: "http://10.1.17.20:8040/services/search/"+param,
        success: function (data) {

            var data=data.result;
            console.log(data);

            alert("Length: "+data.length);

            if($(".row-parent").length){
                $('.row-parent').remove();
            }  

            for(var i=0; i<data.length; i++){

                var no = i+1;

                $table ="<tr class='row-parent' data-toggle='modal' data-target='#myModal'>";
                $table += "<td align='right'>"+no+ "</td>";
                $table += "<td class='id'>"+data[i].link+ "</td>";
                $table += "<td>"+data[i].shared_link+ "</td>";
                $table += "<td>"+data[i].message_header+ "</td>";
                $table +="</tr>";

                $("#tableParent").append($table);
            } 

            load = function() {
                window.tp = new Pagination('#tablePaging', {
                    itemsCount: data.length,
                    onPageSizeChange: function (ps) {
                        console.log('changed to ' + ps);
                    },
                    onPageChange: function (paging) {
                        //custom paging logic here
                        console.log(paging);
                        var start = paging.pageSize * (paging.currentPage - 1),
                            end = start + paging.pageSize,
                            $rows = $('#tableParent').find('.row-parent');

                        $rows.hide();

                        for (var i = start; i < end; i++) {
                            $rows.eq(i).show();
                        }
                    }
                });
            }

            load();

        },error: function (xhr, ajaxOptions, thrownError) {alert("ERROR:" + xhr.responseText+" - "+thrownError);}
    });
});

//Display clicking row parent    
$(".row-parent").on("click",function(){
    alert($('.row-parent').index(data));
});

Hopefully anyone can help me..

Thank is advance:

Show us your HTML code also? – Frebin Francis Jan 15 '16 at 08:54 — Frebin Francis, Jan 15 '16 at 08:54

Ibrahim Khan · Answer 1 · 2016-01-19T09:21:49.940

0

You need event delegation for dynamically generated element like below.

$(document).on("click", ".row-parent", function () {
    var index = $(this).index();
    alert(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="row-parent">
        <td>123</td>
        <td>456</td>
    </tr>
    <tr class="row-parent">
        <td>123</td>
        <td>456</td>
    </tr>
    <tr class="row-parent">
        <td>123</td>
        <td>456</td>
    </tr>
    <tr class="row-parent">
        <td>123</td>
        <td>456</td>
    </tr>
</table>

edited Jan 19 '16 at 09:21

answered Jan 15 '16 at 08:54

Ibrahim Khan

19,912
7
35
51

True, and probably the root cause. That said, as a best practice, you should delegate to the closest static parent, not the the document. If you delegate that high in the hierarchy, any click anywhere on your page will generate a test, which could become a performance issue. – Laurent S. Jan 15 '16 at 08:59
ya..now it works. @LaurentS. How get index once click the row-parent. Try at above but i get -1 – N85 Jan 15 '16 at 09:45
Why it returned -1 for every single row @Azim – N85 Jan 18 '16 at 01:08
I don't know how you tried. You can see my updated answer. @N85 – Ibrahim Khan Jan 18 '16 at 06:41
my script same as above. Is it possible because mine is dynamic?? – N85 Jan 19 '16 at 01:18
Dynamic element is not problem. Can you create a fiddle with your original code? @N85 – Ibrahim Khan Jan 19 '16 at 09:23

score 0 · Answer 2 · answered Jan 15 '16 at 08:57

0

Actually the .row-parent is generated dynamically. You need to add a delegate for your event. Its just like we used .live() function.

$(document).on("click", ".row-parent", function(){
    alert("TEST");
});

answered Jan 15 '16 at 08:57

Tushar

11,306
1
21
41

jquery not function after click row

2 Answers2