Интересно, почему в следующем примере попытка detach элемента (li) приводит к form, содержащему его, в submit

html

<form id="frmToDo" name="frmToDo">
  <p id="lineInput">
    ...
    <input type="submit" id="btnSubmit" value="Add" />
  </p>
  <ul id="todolist">
      <!-- added in ajax -->
  </ul>
</form>

JS

$("#frmToDo").submit(function() {
    // this runs after: $("#todolist").detach(...)
});

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $("#todolist").detach($($(this).parent()).id());
    return false;
});
1
Jiew Meng 31 Май 2010 в 19:24

4 ответа

Лучший ответ

Я думаю, вы просто хотите удалить элемент li, в котором была нажата кнопка.

Поэтому вместо использования

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $("#todolist").detach($($(this).parent()).id());
    return false;
});

Попробуйте использовать

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $(this).parent().detach();
    return false;
});
1
Alexander 28 Фев 2013 в 17:35

Я не уверен, является ли это причиной вашей проблемы, но вы неправильно используете функцию detach, если вы хотите отсоединить элемент li. Аргумент функции detach является выражением селектора, которое фильтрует набор соответствующих элементов в элементе jQuery, для которого вы вызываете функцию. В своем коде вы вызываете detach для $('#todolist'), что означает, что вы хотите отсоединить элемент todolist, если он соответствует переданному аргументу.

Вместо этого вы должны сделать что-то вроде этого:

$('#todolist li').detach(); //this will detach all the li elements

Я не уверен, может ли это объяснить тот факт, что ваша форма отправляется. Если это не так: какое событие вызывает событие отправки вашей формы? Может быть, вы используете кнопку или элемент ввода, который находится внутри формы и вызывает отправку формы?

0
Pierre Henry 31 Май 2010 в 15:44

Если отсутствует какой-либо соответствующий код, вы, похоже, назначаете обработчик для события onclick вне блока $(document).ready(). Это позволяет выполнить присвоение до загрузки #todolist, таким образом, не найдя кнопки и прикрепив обработчики.

При отсутствии отмены событий поведение кнопки по умолчанию - отправка формы.

Попробуй это:

$(document).ready(function(){
    $("#frmToDo").submit(function() {
        // this runs after: $("#todolist").detach(...)
    });

    $("#todolist").delegate("li[id^=task-] button", "click", function() {
        $("#todolist").detach($($(this).parent()).id());
        return false;
    });
});
0
Álvaro González 31 Май 2010 в 15:44

Это не кнопка, это элемент ввода.

$("#todolist").delegate("li[id^=task-] input:submit", "click", function() {
0
Pointy 31 Май 2010 в 15:38