2016-08-11 4 views
0

У меня есть таблица с различными результатами запроса базы данных. Каждый TD имеет идентификатор и onDblClick свойства как это:jQuery: unbind dblclick, а затем связать его снова

<td id="Vorname_2036" onDblClick="makeForm(this.id)"> 
    Mark 
</td> 

Не возражает имя функции, это не реально сделать форму. Вместо этого он изменяет внутренний HTML-файл td на редактируемый ввод текста, а onChange отправляет запрос AJAX скрипту, который обновляет базу данных с измененным значением ввода текста. Все это работает так, как должно. Единственное: после первого двойного щелчка я хочу отключить dblclick, поэтому пользователь не будет дважды щелкать по текстовому вводу. Мне тоже удалось это сделать. Но после того, как все сделано, я хочу восстановить свойство onDblClick. И здесь я застрял.

Вот код (Та часть, которая закомментирована является та часть, которая, очевидно, не так):

function makeForm(id){ 
    $("#"+id).prop('ondblclick', ""); 
    sHtml=$("#"+id).html(); 
    $("#"+id).html("<input type=\"text\" id=\"t_"+id+"\" value=\""+sHtml+"\">"); 
    $("#"+id).change(function(){ 
     var content = $("#t_"+id).val(); 
     $("#"+id).html("<img src=\"icons/spinner.gif\" align=\"right\" width=\"20\" height=\"20\">"); 
     $.get("includes/query_update.php",{ 
      id:id, 
      content:content 
     }, 
     function(data){ 
      $("#"+id).html(data); 
/* 
      $("#"+id).dblclick(
       function(){ 
        makeForm(this.id); 
       } 
      ); 
*/ 
     }); 
    }); 
} 

Заранее спасибо!

Martin

+1

Наиболее распространенный способ развязать даже в JQuery, как правило, это 'off()'. В вашем случае это будет '$ (" # "+ id) .off (" dblclick ");'. Я не знаю, поможет ли это решить вашу проблему, но я бы попробовал, если бы был вами. –

+0

Спасибо, это нормально, но моя проблема в том, как вернуть его снова. –

+0

Я знаю, что я говорю, возможно, так, как вы попадаете в него, это может вызвать проблемы при его перезаписи. –

ответ

0

Вы пытались изменить метод развязывания? Поскольку то, что вы описали в комментариях, будет похоже на то, что событие по-прежнему связано, когда вы его переплетаете (в основном, каждый раз, когда вы нажимаете кнопку, вы привязываете функцию к тому же событию). В JQuery, если вы связываете событие несколько раз, он будет выполняться несколько раз. Я чувствую, что то, как вы отвязываете это, неверно. То, как вы делаете это сейчас, вы удаляете значение свойства OnDblClick на DOM (фактический HTML), в то время как я предполагаю, что вы связали четный метод JQuery $('#id').dblClick(function() {}). При привязке пути JQuery в DOM ничего не добавляется (все сохраняется в памяти в коде JQuery), что делает ваше развязывание эффективно ничего не делает. Вместо того, отменяя это событие так, как вы делали, вы должны попробовать развязывание это так:

$("#"+id).off("dblclick"); 

который является путем JQuery.

+0

Использование off ("dblclick") не имеет значения. Функция все равно вызывается более одного раза. Я думаю, что именно так я пытаюсь связать его снова. –

+0

1 вещь, которую вы могли бы попытаться выяснить, действительно ли это на самом деле - поставить окно предупреждения (временно) в функцию 'makeForm' и посмотреть, появляется ли оно несколько раз. –

+0

Вот что я сделал, и это то, что он делает. –

0

Хорошо, это то, что я придумал сам. Но я признаю, что это были просто догадки, и я не совсем понимаю, почему он работает, и, вероятно, это ужасно неправильно. Но это позволяет мне обновлять данные в ячейке таблицы так часто, как я хочу, не попадая в цикл. Вот он:

function makeForm(id){ 
    $("#"+id).prop('ondblclick', ""); // In the first round this disables the doubleclick event added through HTML (I think) 
    $("#"+id).off("dblclick"); // In the second round this disables the doubleclick event added through jQuery (I think) 
    sHtml=$("#"+id).html(); 
    $("#"+id).html("<input type=\"text\" id=\"t_"+id+"\" value=\""+sHtml+"\">"); 
    $("#"+id).change(function(){ 
     var content = $("#t_"+id).val(); 
     $("#"+id).html("<img src=\"icons/spinner.gif\" align=\"right\" width=\"20\" height=\"20\">"); 
     $.get("includes/query_update.php",{ 
      id:id, 
      content:content 
     }, 
     function(data){ 
      $("#"+id).html(data); 
      $("#"+id).off("dblclick"); // This is beyond me. Why once more? Why here? 
      $("#"+id).dblclick(
       function(){ 
        makeForm(this.id); 
       } 
      ); 
     }); 
    }); 
} 

Если кто-то может улучшить это и объяснить мне, что на самом деле происходит, я буду очень благодарен.

+0

Хорошо, первая плохая идея заключалась в том, чтобы присоединить обработчик событий через HTML. –

+0

ну что странно ... –