點擊行後jquery不起作用

我有問題。它看起來小菜一碟。但我已經在這上面工作了將近3個小時，我不知道會發生什麼。沒有錯誤，但它甚至不顯示警報。點擊行後jquery不起作用

下面是jquery腳本。第一個功能成功運行。但第二個不是。

$("#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)); 
});

希望有人能幫助我..

感謝提前是：

來源

2016-01-15 N85

向我們展示您的HTML代碼？ –

需要事件delegation像下面動態生成的元素。

$(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>

來源

2016-01-15 08:54:56 Azim

是的，可能是根本原因。這就是說，作爲一種最佳實踐，您應該委託給最接近的靜態父級，而不是文檔。如果您在層次結構中委託這麼高的話，任何在頁面上的任何點擊都會生成一個測試，這可能會成爲一個性能問題。 –

你知道它的工作原理。 @LaurentS。如何獲取索引，一旦點擊行父。嘗試在上面，但我得到-1 – N85

爲什麼它返回-1的每一行@Azim – N85

其實.row-parent是動態生成的。你需要爲你的事件添加一個委託。它就像我們使用的.live()函數。

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

來源

2016-01-15 08:57:15 Tushar

點擊行後jquery不起作用

回答

相關問題