.click函數只能在父類.click函數中運行，不能在其外部執行

我一直在開發一個應用程序，它允許使用jquery編輯錶行。原帖是在這裏Targetting a <td> from it's parents <tr> with data-attributes using jquery .click函數只能在父類.click函數中運行，不能在其外部執行

應用程序的流程是：

表被加載。
'編輯'按鈕（帶有類editBtn）出現在每一行上。
單擊「編輯」按鈕將刪除類editBtn並添加類saveBtn。文本也從「編輯」更改爲「保存」。

其意圖是，當點擊保存按鈕時，我可以做一個ajax請求。

但是，我只能瞄準如果它jQuery的駐留內上.editBtn原.click功能被點擊的.saveBtn。因此，例如，這個工程：

$('.editBtn').click(function() { 
    var $button = $(this).addClass('save').text('Save'); 
    var $tr = $button.closest('tr'); 
    var id = $tr.data('id'); 
    var $td = $tr.find('td:first'); 
    var $td2 = $tr.find('td:nth-child(2)'); 

    $td.html('<input value="' + $td.text() + '" />'); 
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>'); 

    $('.saveBtn').click(function() { 
     console.log('savebtn'); 
    }); 
});

但這並不工作：

$('.editBtn').click(function() { 
    var $button = $(this).addClass('save').text('Save'); 
    var $tr = $button.closest('tr'); 
    var id = $tr.data('id'); 
    var $td = $tr.find('td:first'); 
    var $td2 = $tr.find('td:nth-child(2)'); 

    $td.html('<input value="' + $td.text() + '" />'); 
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>'); 

}); 

// Moved outside $('.editBtn').click 
    $('.saveBtn').click(function() { 
     console.log('savebtn'); 
    });

這是爲什麼呢？

來源

2016-11-09 Andy

更新您的代碼使用的（「點擊@功能（）...）格式作爲這個工程的動態元素，其中。點擊（）不這是要點。 @SatPal發送給你的副本 –

@Satpal我不同意這個被標記爲重複的東西，雖然我可以看到與該帖子和我的帖子有相似之處，但是我根本無法根據這個帖子找到它搜索無論如何，下面給出的答案有助於這種情況 – Andy

@Andy，這是重複的，因爲你正在創建_dynamically_，解決方案在鏈接的問題中提供。 – Satpal

它不起作用，因爲您在點擊事件綁定後追加.savebtn。您必須單擊使用文檔。這將工作： -

$('.editBtn').click(function() { 
    var $button = $(this).addClass('save').text('Save'); 
    var $tr = $button.closest('tr'); 
    var id = $tr.data('id'); 
    var $td = $tr.find('td:first'); 
    var $td2 = $tr.find('td:nth-child(2)'); 

    $td.html('<input value="' + $td.text() + '" />'); 
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>'); 

}); 

// Moved outside $('.editBtn').click 
    $(document).on('click', '.saveBtn', function(){ 
     console.log('savebtn'); 
    });

來源

2016-11-09 11:10:16

.click函數只能在父類.click函數中運行，不能在其外部執行

回答

相關問題