Работает JQuery UnBind, Попытка «пере» связать не - PullRequest
Новая
       11

Работает JQuery UnBind, Попытка «пере» связать не

1 голос
/ 20 января 2011

Я работаю над решением JQuery Solution, и по большей части оно работает, но я озадачен, казалось бы, мелкой деталью, которую, как я знаю, пропускаю. Черт, возможно, мою реализацию / подход нужно пересмотреть.

Вот последовательность действий.
1. Нажмите на якорь, который добавляет к таблице.
2. Добавьте CSS Class.
3. Отключите (Unbind) нажмите после preappend ().
4. Из таблицы динамически добавленных записей удалить таблицу на основе идентификатора.
5. удалить класс, добавленный на шаге 2.
6. Привязать 'click'

Однако,хотя я могу связать щелчок и предупредить о нем. Ожидаемая функциональность не позволяет мне снова выполнить вышеуказанный процесс.

Код, о котором идет речь:

ОБРАЗЕЦ HTML:
ссылкакоторый запускает процесс: 

<a href="#" class="view-carrier-scorecard"></a>
<a href="#" class="view-carrier-trend"></a>
<a href="#" class="view-carrier-insurance"></a>
<a href="#" id="17053942" class="add-carrier-company"></a>

таблица, содержащая новые записи после щелчка по ссылке 

<table id="carrier-table"><tbody></tbody></table>

JQUERY и пользовательская функция Javascript 

   <script type="text/javascript" id="removeCarrier">
     function removeCarrierFromList(obj) {
       var i = obj.parentNode.parentNode.rowIndex;
       document.getElementById('carrier-table').deleteRow(i);
       $('a#' + obj.id).removeClass('delete-carrier-company');
       //alert(obj.id); //.hasClass('add-carrier-company').tostring() ); //

       $('a#' + obj.id).bind('click', function() {
          //alert('User clicked on ' + obj.id);
       });
     }
   </script>



 <script type="text/javascript" id="carrierListJS">
    $(function() {

      // Link
      // This adds a carrier to a list
      $('.add-carrier-company').click(
      function() {

        var target = $(this).attr("id");
        alert(target);
        $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" +
       "<td><a href='#' id='" + target + "' class='delete' onclick='removeCarrierFromList(this)'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" +
       "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" +
      "</tr>");

        return false;
      });

      $('.add-carrier-company').click(
       function() { $(this).addClass('delete-carrier-company').unbind('click'); }
      );

    });
  </script>

1 Ответ

0 голосов
/ 20 января 2011

Было несколько проблем, которые я заметил с кодом.Во-первых, как упомянул @RussellUresti, вы создаете два тега с одинаковым идентификатором.Во-вторых, если вы используете идентификаторы в селекторе в jQuery, не включайте имя тега, просто используйте идентификатор (т.е. используйте $('#id'), а не $('a#id')), это будет быстрее (не сломаетсяхотя ваш код).

Я создал jsfiddle , чтобы ответить на ваш вопрос (хотя я переписал большую его часть).:) Я думаю, это то, что вы ищете.

Вот код:
Тест HTML 

<a href="#" class="view-carrier-scorecard">aa</a>
<a href="#" class="view-carrier-trend">bb</a>
<a href="#" class="view-carrier-insurance">cc</a>
<a href="#" id="10002" class="add-carrier-company">10002</a>
<a href="#" id="10003" class="add-carrier-company">10003</a>

<table id="carrier-table" style="border:1px solid #000"><tbody></tbody></table>

JavaScript 

function addCarrier() {
    var target = $(this).attr("id");
    $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + "<td><a href='#' id='a" + target + "' class='delete'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" + "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + "</tr>");
    $('#a' + target).click(removeCarrierFromList);
    $(this).addClass('delete-carrier-company').unbind('click');
    return false;
}

function removeCarrierFromList() {
    var $this = $(this);
    var id = $this.attr('id').replace("a","");
    $this.closest('tr').remove();
    $('#' + id).removeClass('delete-carrier-company').click(addCarrier);
}

$(function() {

    // Link
    // This adds a carrier to a list
    $('.add-carrier-company').click(addCarrier);
});
...