Question

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
   $('.todo a.edit').on('click',function(){

    var container = currentTODO.find('.text');


    $('<input   type="text">').val(container.text()).appendTo(container.empty());

    // Appending the save and cancel links:
    container.append(
        '<div class="editTodo">'+
            '<a id="saveChanges" href="#">Save</a> or <a id="discardChanges" href="#">Cancel</a>'+
        '</div>'
    );

});

   $( ".editTodo" ).on('click',(function() {
            console.log( $(this) );
    }));

<。> .on（'click'...或我尝试在附加项目上使用的任何其他事件不会触发任何内容。不明白为什么。

之前在jquery 1.7上工作

Answer 1

使用事件委托

$('body').on('click','.todo a.edit',function(){
var container = currentTODO.find('.text');
container.empty();
var text = container.text();
$('<input>',{value:text}).appendTo(container);
container.append(
    '<div class="editTodo"><a id="saveChanges" href="#">Save</a> or <a id="discardChanges" href="#">Cancel</a></div>');

});


  $('body').on('click',".editTodo" ,function() {
            console.log( $(this) );
    });

演示：https://jsfiddle.net/wsghquns/

Answer 2

请仔细阅读：

您的代码：

$(".editTodo").on('click',function() {
            console.log( $(this) );
});

更正码：

您可以在'click',

之后使用额外的

$(document).ready(function(){
   $('.todo a.edit').on('click',function(){
    var currentTODO = $('.todo')
    var container = currentTODO.find('.text');
    $('<input   type="text">').val(container.text()).appendTo(container.empty());

    // Appending the save and cancel links:
    container.append(
        '<div class="editTodo">'+
            '<a id="saveChanges" href="#">Save</a> or <a id="discardChanges" href="#">Cancel</a>'+
        '</div>'
    );
    });

  $( ".editTodo" ).on('click',function() {
    console.log( $(this) );
  });
});

完整的修正代码如下：

{{1}}

Jquery 2.0.3追加不起作用的项目

2 个答案: