Мой код работает только один раз

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

Проблема заключается в следующей строке:

iTitlesArray[thumbIdInt] = $(".txt-title").val(); 

Это восстановит все в .txt-title элементов на странице, а затем возвращает значение первого элемента в списке.

Причина этого в том, что вы вызываете fadeOut() и фактически не удаляете предыдущие элементы из DOM. Если вы удалите их после замирания это уже не проблема:

$(".lb_form").fadeOut(function() { 
    $(this).remove(); 
}); 

Смотрите обновленную скрипку: https://jsfiddle.net/fv3q5fng/2/

Answer 2

Смотрите это 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();      
});              
}); 
});