2013-03-27 5 views
1

У меня есть сайт, на котором пользователь может выбрать элемент, затем отображается деталь, включая количество. Я также включил кнопку внутри DIV, так что при нажатии, она должна уменьшить количество на 1.javascript кнопка функция щелчка не работает

 $("#btnBuy1").click(function() 
     { 
      if (!sessionStorage['quantity1']) 
      { 
       sessionStorage['quantity1']=1; 

      } 
      else 
      { 
       sessionStorage['quantity1']++; 
      } 
      $("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £" 
      + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>"); 
      updateBasket(); 
      sessionStorage["total1"] = parseInt(sessionStorage.getItem('quantity1')) * teddy[1].price; 
      updateSubtotal(); 
      if (Modernizr.sessionstorage) 
      { // check if the browser supports sessionStorage 
       myids.push(teddy[1].partnum); // add the current username to the myids array 
       sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage 
      } 
      else 
      { 
      // use cookies instead of sessionStorage 
      }    
     }); 

$("#btnRemove1").click(function() 
{ 
    alert(remove); 
}); 

Я положил в предупреждающем сообщении, чтобы увидеть, если кнопка работает нормально, но когда я нажимаю btnRemove1 , ничего не происходит.

+0

Где ваш HTML-код? Какую версию jQuery вы используете? – DaveHogan

+1

Разве вы не должны указывать здесь строку? 'alert (remove);' –

+0

Можете ли вы добавить код, в котором вы создаете btnRemove1? И работает ли функция btnBuy1 click так, как ожидалось? – FloatingCoder

ответ

7

Поскольку кнопка динамически добавляется, вы можете попробовать:

$(document).on('click', '#btnRemove1', function() { 
{ 
    alert("remove"); //I dont know what remove was is the example, added quotes around it. 
}); 
0

Попробуйте поместить кнопку удалить обработчик щелчка дополнение после создания кнопки удалить

///Code snippit 

$("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £" 
        + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>"); 

$("#btnRemove1").click(function() 
{ 
    alert(remove); 
}); 

updateBasket(); 

///Code snippit 
1

Вы можете связать событие документ, который ранее использовался для использования в jQuery до его устаревания)

сейчас это:

$(document).on("click", "#btnRemove1", function(){}) 

или вы можете переустановить событие после добавления # btnRemove1 в Dom.

0

Это потому, что кнопка добавляется позже (динамически). Вам нужно будет использовать делегат.

Вам не нужно использовать корпус для этого. Любой не динамически вставленный элемент, являющийся родителем # btnRemove1, будет делать.

$('body').on('click','#btnRemove1',function(){ 
    alert(remove); 
}); 

Причина заключается в том, что вы свяжете событие перед элементом # btnRemove1 присутствует на вашей странице. Поэтому для привязки события нечего. Элемент body однако - будет присутствовать на странице и делегировать ваше событие # btnRemove1.

1

Скорее всего, кнопка «Удалить» не находится в DOM, прежде чем пытаться присоединить к ней событие клика. Трудно сказать из фрагментов кода, но если действие кнопки «Купить» не завершилось успешно, то «Удалить» не будет.

В тот момент, когда вы прикрепляете событие click к Remove, попробуйте консоль logging $ ("# btnRemove1"). Length, чтобы узнать, существует ли она или использовать точки останова.

Усовершенствование кода будет кэшировать в переменных $ («# раздаточных»), а затем посмотреть на ваши кнопки в нем, как в:

var $dropBoxNode = $("#dropbox"); 
$dropBoxNode.find("#btnRemove1"); 

И вы должны использовать .он() вместо устаревшего .click().

0
$('a.edit').on('click','a.edit',function(){ 
    if (confirm("Are you sure you want to Edit this Photo?")) 
    { 
    .... 
    ....    
    } 
}); 

не работает При данных Загрузка с AJAX на DIV Area Just Like

<a href="javascript:;;" class="edit">EDIT</a> 
Смежные вопросы