JQuery не удаляет div

У меня есть форма, в которой я добавляю некоторые динамические действия. У меня есть таблица, в которой у меня есть строки позиций претендентов, подавших заявку. Существует кнопка размещения предложения, и когда они нажимают на кнопку предложения, я хочу вставить поля предложений, которые будут отправлены и обновлены. Я могу заставить feilds вставлять, но когда я нажимаю кнопку отмены транзакции, я не могу заставить ее очистить div addapptrans, где построена форма. Ниже приведен код. Я знаю, что это должно быть что-то простое, что мне не хватает.JQuery не удаляет div

<head> 
<script type="text/javascript"> 

    $(function(){ 
     $(".offerposition").click(function(){ 
      var row = $(this).closest('tr').find('td:nth-child(1)').text(); 

      alert('You clicked on ' +row); 
      $("#addapptrans").empty(); 
      $("#addapptrans").append(
       $("<input>").attr('type','hidden').attr('value',row).attr('Name','Mchposid')) 
      .append(
       $("<input>").attr('type','submit').attr('value','Complete Offer').attr('id','completeoffertrx').attr('name','completeoffertrx').addClass("buttonlarge buttonmargin") 
      ).append(
       $("<input>").attr('type','button').attr('value','Cancel Transaction').attr('id','canceloffertrx').attr('name','canceloffertrx').addClass("buttonlarge buttonmargin") 
      ); 

     } 
     ) 
    } 
    ); 

    $(function(){ 
     $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 

     }) 
    }) 
</script> 
</head> 
<body> 

<form > 

    <div id="addapptrans"></div> 
    <p class="posttitle">Positions applied For</p> 
    <table class="tabpositions"> 

     <tbody> 
     <tr> 
      <th class="position">Position</th> 
      <th class="department">Department</th> 
      <th class="dateapp">Date Applied</th> 
      <th class="appdate">Offer?</th> 
     </tr> 

     <tr> 
      <td style="display: none;">2281</td> 
      <td>Building Service Worker - Part time</td> 
      <td>Environmental Services</td> 
      <td>08/13/2001</td> 
      <td><input type="button" class="offerposition" value="Offer Position"></td> 
     </tr>     
     </tbody> 
    </table> 

</form>

источник

2014-10-28 user1554967

Не могли бы вы предоставить скрипку? – GSaunders

Этот код здесь:

$(function(){ 
    $("#canceloffertrx").click(function(){ 
     $("#addapptrans").empty(); 
    }) 
})

Запускается перед #canceloffertrx существует на этой странице. Итак, $("#canceloffertrx").click(fn) Совпадает с нулевыми элементами на странице и привязывает обработчик кликов ко всем нулям.

Вы можете исправить это, привязывая обработчик кликов к документу или ближайшему родительскому объекту, который присутствует.

$('#addapptrans').on('click', '#canceloffertrx', function(){

Это говорит о том, что, когда элемент #addapptrans получает событие щелчка, и элемент, соответствующий селектор #canceloffertrx был один, который был на самом деле щелкнули, огнь функции обработчика событий.

Или путем привязки обработчика кликов при создании кнопки.

$("<input>") 
    .attr('type','submit') 
    .attr('value','Complete Offer') 
    .attr('id','completeoffertrx') 
    .attr('name','completeoffertrx') 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

Наконец, некоторые советы стиля :) Особенно, когда сцепление методов JQuery, вы можете поместить каждый вызов на его собственной линии, что делает его гораздо более удобным для чтения.

И вы также должны знать, что attr() может принимать объект в качестве аргумента, позволяя вызвать его только один раз, чтобы установить множество атрибутов.

$("<input>") 
    .attr({ 
    type: 'submit', 
    value: 'Complete Offer', 
    id: 'completeoffertrx', 
    name: 'completeoffertrx' 
    }) 
    .addClass("buttonlarge buttonmargin") 
    .click(function() { ... });

источник

2014-10-28 17:40:45

Лучше всего присоединить делегированные обработчики событий к ближайшему не меняющемуся элементу предка (например, '# addapptrans' в этом вопросе). 'document' является резервным, если ничего не ближе. –

Ваше решение работает http://jsfiddle.net/jn7jh3bm/ – jbyrne2007

Отмечено и исправлено! :) –

JQuery не удаляет div

ответ

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