Переключение ввода с одним родительским действием .click ()

0

У меня возникли проблемы с поиском надлежащего способа заставить его работать:

У меня есть таблица с несколькими ячейками:

$('tr > td').click(function()

каждый раз, когда ячейка нажата, я добавляю в эту ячейку вход и 2 кнопки (одна кнопка должна проверять, другая - удалить всю вещь в ячейке, чтобы удалить ее и обе кнопки)

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

$('tr > td').click(function()

поэтому он делает то, что он удаляет входные и 2 кнопки, но добавляет их обратно.

мне нужно, чтобы:

если ячейка пуста: добавьте ввод + 2 кнопки, если нажата кнопка удаления: удалить вход + 2 кнопки из ячейки ячейки может иметь только 1 раз вход и 2 кнопки (поэтому не вводить кратные входы и более 2 кнопок)

Я пытался сделать это правильно, используя toggleClass и используя оператор if с hasClass, но он никогда не идет так, как я хочу.

Спасибо за вашу помощь, надеюсь, вы можете заполнить мою нехватку логики.

РЕДАКТИРОВАТЬ:

   function remove()
{
    event.stopPropagation();
    $(this).parent().
    $(this).parent().toggleClass('removed');
    $(this).prev().prev().remove();
    $(this).next().next().remove();
    $(this).remove();
}
    $('tr > td').click(function(event)
    {
        if ($(this).hasClass("done") == false && $(this).hasClass("removed") == false)
        {
            $(this).toggleClass("done");
            $(this).append("<input class='form-control' style='height:25px;width:105px;' type='text'></input>");
            $(this).append("<button onclick='remove();' type='button' id='removeUser' class='btn btn-xs'><span class='text-danger glyphicon glyphicon-remove'></span></button>");
            $(this).append("<button type='submit' id='addUser' class='btn btn-xs'><span class='text-success glyphicon glyphicon-ok'></span></button>");
        }

TD может иметь только 1 [вход + 2 кнопки]

Если нажата кнопка удаления, удаляется [вход + 2 кнопки]

Если щелкнуть TD и TD пуст, добавьте [input + 2buttons]

Извините за опоздание, это было время запуска :)

  • 0
    остановить распространение по нажатию кнопок
Теги:
toggle

3 ответа

2
Лучший ответ

event.stopPropagation()

Это предотвращает запуск клика на родительском элементе кнопки. Таким образом, когда вы нажимаете на свою кнопку, используйте эту функцию, чтобы избежать нажатия кнопки на td, а также

DEMO

Если вы удалите e.stopPropagation также e.stopPropagation предупреждение на div. Итак, теперь вы знаете, как его использовать.

Не забудьте изменить обработчик щелчка на кнопке .click(function(){... to .click(function(event){... или .click(function(e){... как я сделал в демо, так что вы можете использовать этот метод.

EDIT, чтобы ответить на ваш EDIT

Изменить это

$('tr > td').click(function(event)
{

к этому

$('tr > td').click(function(event)
{
    event.stopPropagation();

и удалите event.stopPropagation из функции remove() пожалуйста.

Поделиться
  • 0
    Но если он будет удален, он должен снова добавить [кнопки ввода + 2 кнопки], как?
  • 0
    Твоя проблема была в том, что события всплывают. Вы пытались исправить свой код, используя эти предложения? Вы просите нас предоставить вам полный код того, что вы пытаетесь сделать? Вы можете объяснить лучше? Спасибо.
Показать ещё 5 комментариев
0

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

$('tr > td').click(function(event){
  event.stopPropagation();

  alert("The  element was clicked.");

});
Поделиться
0 
event.stopPropagation()

дальнейшее чтение: буферизация событий и захват

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню