duankousong9637
2017-01-31 14:43
浏览 169
已采纳

在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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doushu7588 2017-01-31 14:45
    已采纳

    Use the following:

    $(document).ready(function(){
        var itemsArr = [];
      $(document).on('click','.btn-add',function() {
        // code goes here.....
      });
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题