Изменить текст в кнопке не работает

Question

Я пишу следующий код:

<span id="post">search by id</span> 


$("#post").click(function() { 
    var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>"); 
    $(this).replaceWith(input); 
    setTimeout(function() {change();},1250); 
}); 


function change() { 
    var input = $("<span id='post'><u>search by id</u></span>"); 
    $("#input_find_by_id").replaceWith(input); 
    $("#button_search_by_id").remove(); 
    //input.select(); 
} 

http://jsfiddle.net/alonshmiel/APjyy/2/

, когда я нажимаю «поиск по идентификатору», она изменяется в кнопку, а затем, после того, как 1 момент, он возвращается к «поиск по id».

Но, когда я пытаюсь снова нажать его, ничего не происходит. почему я не могу снова нажать кнопку?

Answer 1

При замене оригинальной пяди с другим содержания, вы эффективно удалить элемент из DOM - вместе с любыми событиями, прикрепленных к Это. Когда вы снова добавите свой диапазон (в функции change), это вновь созданный элемент, к которому не привязаны обработчики событий - вам нужно будет снова привязать обработчик событий.

Альтернатива для решения этой проблемы была бы использовать jQuery on функции, чтобы прикрепить «живые» обработчики событий:

$(document).on('click', '#post', function() { 
    ... 
}); 

Кроме того, так как вы только вызов одной функции без аргументов в вашем setTimeout, вы можете упростить его

setTimeout(change, 1250); 

Answer 2

У вас больше нет обработчика событий на ваших вновь созданных элементах.

Измените обработчик событий на документ и обработайте его, если выбран конкретный селектор. Таким образом, ваш обработчик событий уволит для каждого нового элемента, который отвечает критериям селектора:

$(document).on('click', '#post', function() { 
    var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>"); 
    $(this).replaceWith(input); 
    setTimeout(function() {change();},1250); 
}); 

Answer 3

после замены SearchBox с «постом» пролетом, вы не подменой события щелчка на этот промежуток ..

пример здесь, даже если я думаю, что не очень beautufil: http://jsfiddle.net/APjyy/5/

function change() { 
    var input = $("<span id='post'><u>search by id</u></span>"); 

    $("#input_find_by_id").replaceWith(input); 
    $("#button_search_by_id").remove(); 
    //input.select(); 

    $("#post").click(function() { 
     var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>"); 
     $(this).replaceWith(input); 
     setTimeout(function() { 
      change(); 
     }, 1250); 
    }); 
} 

Answer 4

вы можете сделать это путем сокрытия текста и снимите скрытие уже присутствует, но скрытую кнопку

Answer 5

USE: Вы добавляете " post "id элементов при изменении():

$("#post").click(function() { 
     var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>"); 
     $(this).replaceWith(input); 
     //setTimeout(function() {change();},1250); 
    }); 


    function change() { 
     var input = $("<u>search by id</u>"); 
     $("#input_find_by_id").replaceWith(input); 
     $("#button_search_by_id").remove(); 
     //input.select(); 
    } 

Answer 6

Я обновил скрипку. http://jsfiddle.net/APjyy/6/

При нажатии «search by id» в первый раз, вы должны rebind его "#post". Потому что вы удаляете элемент из DOM, и, следовательно, прослушиватель событий также удаляется. Когда вы добавляете элемент, jQuery ничего не знает об этом, поэтому слушатель не работает.

Необходимо использовать событие delegation.

$("body").on('click', '#post' , function() { 

}); 

См. Документацию здесь. http://api.jquery.com/on/