2016-03-07 156 views
1

我是jquery的新手。我有一個頁面,我有兩個按鈕。其中一個是編輯按鈕,另一個是刪除按鈕。當我點擊編輯按鈕時,它將刪除這兩個按鈕,並在相同的地方(刪除和編輯按鈕之前的地方)添加三個元素,其中一個是「保存」按鈕。這個保存按鈕有一個類 - 「save-btn」。我通過jquery類選擇器選擇這個按鈕。並點擊它應該做一些事情。但是,當我點擊沒有發生。任何人都可以建議最新的錯誤並給出解決方案。提前致謝。單擊事件後單擊事件不起作用。

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-2 "></div> 

    <div class="col-md-4 "> 
     <div class="form-tile"> 
      <form action="" method="post">{% csrf_token %} 
      {% crispy form %} 
      </form> 
     </div> 
    </div> 
    <div class="col-md-4 tile"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 style="margin-top: 0px;padding-top: 0px;text-align: center">Today's Purchase</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <table class="table table-hover"> 
       <thead> 
       <tr> 
        <th>Item</th> 
        <th>Price</th> 
        <th>Actions</th> 
       </tr> 
       </thead> 
       <tbody> 
       {% for item in items %} 
       <tr> 
        <td>{{ item.name }}</td> 
        <td>{{ item.price }}</td> 
        <td><button class="btn btn-primary edit-btn"><i class="fa fa-pencil-square-o"></i></button> 
        <button class="btn btn-danger delete-btn"><i class="fa fa-trash"></i></button> 
        </td> 
       </tr> 
       {% endfor %} 
       </tbody> 
      </table> 
     </div> 

    </div> 
    <div class="col-md-2 "></div> 
</div> 

這裏是我的javascript

<script> 
$(function(){ 
    $(".edit-btn").click(function(){ 
     var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>' 
     var parent = $(this).parent().parent().html(custom_form); 
    }); 

    $(".save-btn").click(function(){ 
     alert("asnlas"); 
    }); 

}); 
</script> 
+0

我覺得這個班級不具約束力h文檔準備期間的jQuery。爲了讓它工作,試試這個。 ('click','.save-btn',function(){alert(「asnlas」);}); (「。save-btn」)。click(function(){alert(「asnlas」);}); –

回答

2

當你創建一個元素,你必須在同一時間

試試這個事件指定....

$(function(){ 
$(".edit-btn").click(function(){ 
    var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>' 
    var parent = $(this).parent().parent().html(custom_form); 

    $(".save-btn").click(function(){ 
     alert("asnlas"); 
    }); 
}); 

});