在jquery中添加ajax后OnClick无法正常工作

I have created a page, it has a select box which is used for filtering the results in a table below it. The select box is using ajax to filter results.The table which is loaded after ajax call has a button in one column, on its click a div should be added in the page. The onclick for this button was working fine when the table was static with static button to add div, now the table is being loaded through ajax the button doesn't work, it doesn't add the div that it was adding before. Can someone point out the problem please, I am a beginner in jquery and ajax

here is my code:

(function ( $ ) { 
    $(document).ready(function(){
        var itemsArr = [];
        $(".btn-add").on("click",function() {
        var $row = $(this).closest("tr"); // Find the row
        var $text = $row.find(".this-name").text(); // Find the text

        // Let's test it out
        $('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button">X</a></div>');
        itemsArr.push($text);
        //alert(itemsArr);
        console.log("added");
        $("#items").val(JSON.stringify(itemsArr));
        });

 function getAll(){

     $.ajax
     ({
     url: 'http://asp4.walnut-labs.com/getproducts.php',
     data: 'action=showAll',
     contentType :'application/json',
     cache: false,

     success: function(r)
     {
     $("#col1").html(r);
     }
     }); 
 }

 getAll();
    // function to get all records from table


    // code to get all records from table via select box
 $("#brands").change(function()
 { 
    var id = $(this).find(":selected").val();

     var dataString = 'action='+ id;

     $.ajax
     ({
     url: 'http://asp4.walnut-labs.com/getproducts.php',
     data: dataString,
     contentType :'application/json',
     cache: false,
     success: function(r)
     {
     $("#col1").html(r);
     } 
     });
 });

    });

    $(document).on('click','.delete-button', function(e){
     e.preventDefault();
     //alert('yes');
     $(this).closest('.item').remove();
    });

}( jQuery ));

HTML is :

<tbody>
<tr bgcolor="#238efb" color="white">
<td style="text-align: center; color: #fff;"><strong>ID</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Code</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Name</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Brand</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Button</strong></td>
</tr>



<?php
while($row = mysql_fetch_array($comments, MYSQL_ASSOC))
{
$id = $row['id'];
$name = $row['code'];
$level = $row['name'];
$number = $row['brand'];
?><tr>
<td class="this-id" style="text-align: center;"><?php echo $id;?></td>
<td class="this-name" style="text-align: left; padding-left: 15px;"><?php echo $name;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $level;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $number;?></td>
<td style="text-align: left; padding-left: 15px;"><button class="btn-add">Add Item</button></td>
</tr><?php
}

mysql_close($con);
?>
</tbody>
</table>

For selectbox that triggers AJAX:

<div class="searchbar">
    <select name="brands" id="brands">
        <option value="showAll" selected="selected">Show All Products</option>
    <?php $querybrand = "SELECT DISTINCT brand FROM q1h27_data ";
        $commentsbrand = mysql_query($querybrand);
    while($row = mysql_fetch_array($commentsbrand, MYSQL_ASSOC))
    {
//print_r($row['brand']);?>
    <option value="<?php echo $row['brand']; ?>"><?php echo $row['brand']; ?></option>
    <?php } ?>
    </select>
</div>
douwei7203
douwei7203 你得到了下面的答案,但需要解释。这种行为的原因是,在使用ajax加载后,您的按钮不再有任何事件。所以你必须再次设置事件。
3 年多之前 回复
duannei1477
duannei1477 你有多个按钮,哪一个点击不起作用?这个.delete按钮?
3 年多之前 回复

1个回答



使用以下内容:</ p>

  $(document).ready(function()  {
var itemsArr = [];
$(document).on('click','。btn-add',function(){
// code code here .....
}};

}
</ code> </ pre>
</ div>

展开原文

原文

Use the following:

$(document).ready(function(){
    var itemsArr = [];
  $(document).on('click','.btn-add',function() {
    // code goes here.....
  });
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问