javascript - 我的代码只能运行一次

Question

我的代码只能运行一次。

这是我的 HTML:

 <span id="0" class="add-title">add title</span>

我的 JavaScript:

jQuery(document).ready(function($) {    

var iTitlesArray = [];  

$(document).on("click", ".add-title", function () { 

    alert(iTitlesArray);

    var thumbId = $(this).attr("id"), 
        thumbIdInt = parseInt(thumbId);             

    var lb_form = $('<div></div>').addClass('lb_form');
    var title_input = $('<input type="text">').addClass('txt-title');
    var btn = $('<div>Ok</div>').addClass('div-btn');   

    lb_form.append(title_input, btn);                   
    $('body').append(lb_form);

    $( ".div-btn" ).on( "click", function() {
            iTitlesArray[thumbIdInt] = $(".txt-title").val();
            $(".lb_form").fadeOut();                    
    });                                                     
  });
});

iTitlesArray 的值仅在第一次更新。有人知道为什么吗？

https://jsfiddle.net/fv3q5fng/1/

Answer 1

查看此Fiddle每次点击您的代码时，它都会起作用。

jQuery(document).ready(function($) {    

var iTitlesArray = [];  

$(document).on("click", ".add-title", function () { 

var thumbId = $(this).attr("id"), 
    thumbIdInt = parseInt(thumbId);             

var lb_form = $('<div></div>').addClass('lb_form');
var title_input = $('<input type="text">').addClass('txt-title');
var btn = $('<div>Ok</div>').addClass('div-btn');   

lb_form.append(title_input, btn);                   
$('body').append(lb_form);

$( ".div-btn" ).on( "click", function() {
        iTitlesArray[thumbIdInt] = $(".txt-title").val();
        $(".lb_form").fadeOut();                    
});                                                     
});
});