2011-09-20 6 views
2

Я пытаюсь добавить кнопку и нажать кнопку прослушивателя для каждого диапазона сохранения на странице. Я:jQuery только выбор первого элемента

$("#save").button().click(function(){ 
    currentSlide++; 
    loadPage(); 
} 

loadPage очищает мое диалоговое окно и загружает следующий слайд в поле. Если я не добавлю этот код к функции страницы загрузки, только первой кнопке сохранения назначается кнопка и нажмите кнопку прослушивания. Почему мне нужно назначать слушателя каждый раз. Не следует ли jQuery назначать кнопку и нажимать кнопку прослушивания на все #save?

Все слайды хранятся на странице. Загрузка страницы занимает скрытый контент и добавляет его в диалоговое окно.

ответ

6

Идентификатор должен быть уникальным для всех элементов !!!

Вы определили функцию ID selector для привязки к функции щелчка. Для каждого элемента должен быть только один идентификатор, а $('#save') привязывается только к одному элементу (первый). Если вы хотите связать со всеми пролетами, используемых таким образом, затем добавить класс для каждого пролета и ссылаться на него таким образом, используя class selector

$('span.mysave') 
+4

Если бы у меня был никель для каждого вопроса, который был ответом на ... – Jack

+0

@ Джек .. Да, я верю, что ответил на многие из этих вопросов –

+1

Это не устраняет проблему потери обработчика событий при редактировании содержимого страницы/добавляется после загрузки начальной страницы. – jondavidjohn

4

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

Атрибут зарезервирован как уникальный идентификатор для отдельного элемента на странице.

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

Во-вторых, если вы динамически добавлять элементы на страницу, используйте .live('click', ...) вместо .click(), чтобы иметь возможность работать с текущими и будущих элементов, добавленных на страницу.

// note selecting class ".save" instead of id "#save" 
$(".save").button().live('click', function(){ 
    currentSlide++; 
    loadPage(); 
} 
1

У меня есть ощущение, что вы используете идентификатор save больше, чем когда-то на этой странице. По меньшей мере, использование #save в качестве селектора jQuery будет выбирать только один элемент из-за того, что он является идентификатором.

Заменить id="save" с class="save" и использовать .save, чтобы выбрать его с JQuery - классы могут быть использованы несколько раз, и даже несколько классов, используемых на одном элементе.

2

# означает id и id='save' действителен только для одного элемента за один документ (одно значение id «ы не могут быть использованы больше, чем один раз ). Используйте class='save' вместо этого и использовать

$(".save").button().click(function(){

2

сохранить это идентификатор и как таковой должен быть только один раз на странице. $('#save') соответствует document.getElementById('save'), который возвращает один элемент.

Если вы загружаете содержимое для загрузки, вы должны использовать live или delegate.

2

#save - это идентификатор. Идентификаторы должны быть уникальными. jQuery принимает это и получает только 1-й элемент. Вместо идентификатора используйте класс.

Придумайте имя, класс и ID атрибуты, как это:

  • Элементы могут иметь одно имя, но они не должны быть уникальными. Несколько элементов могут иметь одно и то же имя.
  • Элементы могут быть в нескольких классах. Несколько элементов могут находиться в одном классе.
  • ID - уникальный идентификатор для этого элемента.
0

В отличие от других ответов, я предполагаю, что «первый» кнопку сохранения вы имеете в виду, что вы заменяете содержимое предка элемента с id="save" при loadPage().

Если это так, то оригинальный элемент «Сохранить кнопку», связанный с jQuery при вызове click(), был уничтожен и заменен новым, о котором не знает jQuery. Только те элементы, которые были выбраны при первом создании селектора, привязаны; он не обновляется, когда вы меняете набор элементов, которые будут соответствовать.

Таким образом, после вызова loadPage() вы должны вызвать click() связать функцию снова (а также button() снова, так что изменился старый элемент так должен был бы быть направлены на обновление новый тоже).

Если вы хотите связать событие с «любым элементом в настоящее время или в будущем, который имеет идентификатор save», то, что вы хотите событие делегация (delegate(), или его сомнительна кузен live()):

$(document.body).delegate('#save', 'click', function(){ 
    currentSlide++; 
    loadPage(); 
}); 

Хотя это не позволяет вам повторно позвонить button().

+0

Сложно сказать из вопроса, но вполне возможно, что действие 'loadPage()' заменяет кнопку сохранения либо намеренно, либо из-за нецелесообразного использования 'html()'. – bobince

0

Что говорят другие, верно, jQuery вернет первый идентификатор. Но это не всегда так. Пропустите этот код для проверки:

<script type="text/javascript" src="/scripts/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("div").click(function() { 
      //$("#a", $("div")).remove(); // 1 
      $("#a").remove();    // 2 
     }); 
    }); 
</script> 

<div style="border: solid 1px black;"> 
    <p id="a">I am the first paragraph.</p> 
    <p id="a">I am the second paragraph.</p> 
</div> 

При выполнении строки 2 он забирает первую #a. Запуск линии 1 удаляет их обоих. Поэтому, если вы не можете изменить разметку для использования классов вместо этого, выбор подбора может быть ответом.

Смежные вопросы