jQuery .click（）不工作在附加的<tr>从ajax

问题描述：

我有一个表，其中表行正在通过我的ajax返回。jQuery .click（）不工作在附加的<tr>从ajax

Ajax调用/返回在搜索结果中出现

<div class="retained intake_content"> 
     <table id="searchResults" style="width:80%"> 

     </table> 
</div> 
     <style> 
      #searchResults tr:hover { 
       background-color: orange; 
       cursor: pointer; 
      } 
     </style>

我的检索从SQL的信息和呼应创建表行PHP

$("#searchButton").click(function(){ 
    var lastName = $('#lastName').val(); 
    var data = { 
     action: 'mysearch', 
     post_lastName: lastName 
    }; 
    $.post(
     the_ajax_script.ajaxurl, 
     data, 
     function(response) 
     { 
      $("#searchResults").append(response); 
     } 
    ); 
    return false; 
});

HTML文件。

while($row = $stmt ->fetch(PDO::FETCH_ASSOC)){ 
     $firstName = $row['first_name']; 
     $lastName = $row['last_name']; 
     $id = $row['id']; 

     echo '<tr><td>' . $firstName .'</td><td>' . $lastName . '</td><td>' . $id .'</td><td><button type="button" id="personid" name="rowId" value="' . $id . '"> View</button></td></tr>'; 
    }

我的测试，看看按钮被点击。

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

    //var id =$(this).val(); 
    console.log("Clicked"); 
    alert('Row has been clicked'); 
});

我添加一个按钮与rowsid与使用JQuery。点击（）事件的ID发送到另一个AJAX调用，以检索的详细信息的意图的ID。问题是我无法让JQuery .click（）完全提醒。然后我试着如果console.log可以工作，但没有。

所以我猜测.append（）有很多与这个问题或我回应表的方式吗？任何帮助将不胜感激。

BTW，这是一个WordPress插件...

使用事件代表团。 http://*.com/q/23932472/3639582 –

@ShaunakD工作就像一个魅力！但我不明白为什么你的方法在失败的时候起作用。我会看看API，但我猜，因为我动态添加表行，我需要再次选择文档？ $（文件）。在（）; – avd

问题在于，每次你追加一行ID都会重复。重复的ID是无效的HTML。尝试使用类。 –

答

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="jquery-ui.css"/> 
     <script type="text/javascript" src="jquery-1.11.3.js"></script> 
     <script type="text/javascript" src="jquery-ui-1.11.4.js"></script> 
     <title>Dialog</title> 
     <script type="text/javascript"> 

      $('document').ready(function(){ 
       $('#search').click(function(){ 
        $.get('table.php' ,function(data) { 
         $('#tb').append(data); 
        }); 
        return false; 
       }); 

       $('#tb').on('click','tr',function(){ 
        alert($(this).attr('personID')); 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <style> 
      table,tr,td{ border:1px solid #000;border-collapse:collapse;} 
     </style> 
     <table id="tb"> 

     </table> 
     <a href="#" id="search">Search</a> 
    </body> 
</html>

PHP

<?php 
echo '<tr personID="1"><td>1</td><td>2</td></tr>'; 
echo '<tr personID="2"><td>3</td><td>4</td></tr>'; 
?>

不是我用它来完成这个工作的确切方法，但是答案是完美的，谢谢！ – avd

答

personid冲突，我认为，有多个按钮什么的ID属性“PERSONID”。尝试 $("#searchResults tr td button[name='rowId']").on("click", function() { console.log($(this)); });

答

我建议你在按钮中使用class属性，因为在HTML文档中不正确的重复id。

试试这个：

<table><tr><td>some</td><td><button class='btn' value='1'></button></td></tr></table> 

<script> 
    $(".btn").click(function(){ 
     console.log($(this).val()); 
    }) 
</script>

答

这将工作：

$("#personid").live('click', function(){ 
    //var id =$(this).val(); 
    console.log("Clicked"); 
    alert('Row has been clicked'); 
});

live（）是自1.7+以来jQuery中不推荐使用的函数。使用on（）函数http：//api.jquery。 com/live/ – karanmhatre

jQuery .click（）不工作在附加的从ajax

相关推荐