Jquery пытается работать с динамическими идентификаторами с помощью события onclick

Question

Проблема, с которой я столкнулся, заключается в том, что, когда я нажимаю на элемент LIKE, он открывает все текстовые поля

. В событии щелчка нужно отображать только одно текстовое поле.

Вотпример html:

<div id="sublike-1">Like</div>
<div id="sublike-form-1"><input type="text" /> Save</div>

<div id="sublike-2">Like</div>
<div id="sublike-form-2"><input type="text" /> Save</div>

<div id="sublike-3">Like</div>
<div id="sublike-form-3"><input type="text" /> Save</div>

Мой Jquery:

// Display Sub Like form
$(this).find("div[id^='sublike-']").live('click', function(){
 $("div").find("div[id^='sublike-form-']").toggle();
});

Что я могу сделать, чтобы он не открывал оба текстовых поля одновременно, я должен изменить мои html div, мой jqueryили оба?

Спасибо

Answer 1

Если вы абсолютно уверены, что каждое текстовое поле будет рядом с элементом «Мне нравится», вы можете использовать siblings или next:

$(document).find("div[id^='sublike-']").live('click', function(){
    $(this).siblings("[id^='sublike-form-']:first").toggle();
});

Но если текстовое поле может быть "далеко" от элемента Like, вы можете проанализировать идентификатор:

$(document).find("div[id^='sublike-']").live('click', function(){
    var num = this.id.split('-')[1];
    $('#sublike-form-' + num).toggle();
});

Проверьте этот пример: http://jsfiddle.net/marcosfromero/ZbTzN/

Answer 2

jQuery forum answer

Вы должны добавить событие клика к существующему элементу.Вы не можете добавить событие в динамически создаваемые элементы dom.Если вы хотите добавить событие к ним, вам следует привязать событие к существующему элементу, используя «.on».

$('p').on('click','selector_you_dynamic_created',function(){...});

.delegate также должен работать.

Answer 3

Я вижу, что другие опубликовали некоторые очень работающие решения, основанные на .live, но я решил, что все равно добавлю свое решение,

Во-первых, я бы предложил немного изменить разметку, еслиВы можете, например, так:

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

<div class="sublike-box">
    <a class="sublike-btn">Like</a>
    <div class="sublike-form"><input type="text" /> Save</div>
</div>

Это дает более читаемую и семантическую структуру для разметки, облегчая чтение и отслеживание.

Далее, для кода, I настоятельно поощряйте использование .delegate метода вместо .live.

$('div.sublike-box').delegate('a.sublike-btn', 'click', function (e) {
    $(this).next('div.sublike-form').toggle();
});

должно сработать.

Answer 4

Согласно DOM, попробуйте это должно работать:)

$(this).find("div[id^='sublike-']").live('click', function(){
 $(this).next('div[id^="sublike-form-"]').toggle()
});

Answer 5

$(this).find("div[id^='sublike-']").live('click', function(){
 $(this).next().toggle();
});