jquery点击脚本页面更改后不活动

Question

我在列表页面上有两个jQuery脚本。第一个使列表行可点击。它工作正常。

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $(".clickableRow").click(function(e) { 
      console.log('clickable row clicked'); 
      window.document.location = $(this).attr("href"); 
     }); 
    }); 
</script> 

第二个是过滤行的搜索功能，它也可以正常工作。

<script type="text/javascript"> 

    jQuery(document).ready(function() { 
     $("#search-filter").click(function (evt) { 
      evt.preventDefault(); 
      console.log('evt triggered'); 
      q=$('#q').val(); 
      q_fields=$('#q-fields').attr('value'); 
      $.ajax({ 
       type: 'GET', 
       url: $(this).attr("href"), 
       datatype: 'html', 
       data: {'q': q, 
        'q_fields': q_fields, 
        'title': $('#title').text()}, 
       success: function(code_html, status) { 
        $('#object-list').children().remove(); 
        $(code_html).appendTo('#object-list'); 
       }, 
       error: function(result, status, error) { 
        alert(result); 
       } 
      }); 
     }); 
    }); 
</script> 

它是通过这种形式的激活：

<form method="get" action=""> 
    <input id="q" type="text" name="q"> 
    <input id="q-fields" type="hidden" value="name, prenom" name="q_fields"> 
    <button id="search-filter" class="btn" type="submit" href="/contacts/ajax_update_contact_list">search</button> 
</form> 

这lattest脚本是一个搜索功能，过滤行，它工作正常。问题是，当我的行被过滤时，第一个脚本不再工作。

<tr class="clickableRow" href="/contacts/532/"> 
    <td></td> 
    ... 
</tr> 
<tr class="clickableRow" href="/contacts/533/"> 
    <td></td> 
    ... 
</tr> 

我甚至没有收到控制台信号“clickableRow clicked”。我一定有什么不对，但是我看不到。

Answer 1

尽量使点击进入一个函数，再调用完成后的负荷AJAX

<script type="text/javascript"> 
 
    jQuery(document).ready(function($) { 
 
     clickController(); 
 
    }); 
 
    function clickController() 
 
    { 
 
     $(".clickableRow").click(function(e) { 
 
      console.log('clickable row clicked'); 
 
      window.document.location = $(this).attr("href"); 
 
     }); 
 

 
     $("#search-filter").click(function (evt) { 
 
      evt.preventDefault(); 
 
      console.log('evt triggered'); 
 
      q=$('#q').val(); 
 
      q_fields=$('#q-fields').attr('value'); 
 
      $.ajax({ 
 
       type: 'GET', 
 
       url: $(this).attr("href"), 
 
       datatype: 'html', 
 
       data: {'q': q, 
 
        'q_fields': q_fields, 
 
        'title': $('#title').text()}, 
 
       success: function(code_html, status) { 
 
        $('#object-list').children().remove(); 
 
        $(code_html).appendTo('#object-list'); 
 
        clickController(); // re-call function in here 
 
       }, 
 
       error: function(result, status, error) { 
 
        alert(result); 
 
       } 
 
      }); 
 
     }); 
 

 
    } 
 
</script>