我該如何更改div的值，這是之前由jQuery創建的

Question

我想創建一個腳本，這將提供製作營養素數量的食物表的可能性。讓我們說每日菜單。 當用戶點擊按鈕時，成分添加到表格中。有+是和 - 在成分的線路按鍵由1

HTML來改變它的量：

<div class="menuContainer"> 
<div class="foodListContainer"> 
    <div class="row"></div> 
</div> 
<div class="buttonsContainer"> 
    <button value="100,g.,12.6,2.6,68,355">Buckweat</button> 
    <button value="1,ps.,6.3,5.7,0.35,78.5">Egg</button> 
    <button value="1,sp.,2.8,3.2,4.7,58">Butter</button> 
    <button value="100,g.,12.6,2.6,68,355">Meat</button> 
</div> 

JS：

$(document).ready(function() { 

//When user click a button 
$(".buttonsContainer button").click(function() { 

    //catching the name of food 
    var choosenFood = $(this).text(); 

    //catching the value of pressed button with info 
    //about this food and making an array with it 
    var value = $(this).val(); 
    var arr = value.split(','); 

    //insert div's with info from array 
    $($.parseHTML(
     '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>')).appendTo(".row"); 

    //trying to change value 
    $('.down').click(function() { 
     $(this).prev().prev(".value").html(function (i, val) { 
      return val * 1 - 1; 
     }); 
    }); 

    $('.up').click(function() { 
     $(this).next(".value").html(function (i, val) { 
      return val * 1 + 1; 
     }); 
    }); 
}); 

的問題時，從那裏開始表中有2行和更多行。行數越多，+和 - 按鈕的更改值就越多。你最好看看這裏：https://jsfiddle.net/ts3n35bq/

我認爲，這是有一定的範圍問題。可能的，最關鍵的錯誤是從「appendTo」動作直接調用「up」和「down」動作，並且似乎這個函數在每一行都重複出現，直到結束。但是當我試圖從那裏刪除它們時，它們根本不工作。

我會很感激任何建議或幫助。謝謝！

Answer 1

這應該適合你。

$(document).ready(function() { 

    $('body').on('click', '.down', function() { 
     $(this).prev().prev(".value").html(function (i, val) { 
      return val * 1 - 1; 
     }); 
    }); 


    $('body').on('click', '.up', function() { 
     $(this).next(".value").html(function (i, val) { 
      return val * 1 + 1; 
     }); 
    }); 

    //When user click a button 
    $(".buttonsContainer button").click(function() { 

     //catching the name of food 
     var choosenFood = $(this).text(); 
     //catching the value of pressed button with info about this food and making an array with it 
     var value = $(this).val(); 
     var arr = value.split(','); 

     //insert div's with info from array 
     $($.parseHTML(
      '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>')).appendTo(".row"); 

     //trying to change value 



    }); 
}); 

Answer 2

$(".buttonsContainer").on('click','button',function(){ 
    //your code 
}); 

Answer 3

使用解除綁定上點擊功能

$('.down').unbind().click(function() { 
      $(this).prev().prev(".value").html(function (i, val) { 
       return val * 1 - 1; 
      }); 
     }); 

     $('.up').unbind().click(function() { 
      alert($(this).next(".value").attr('id')); 

      $(this).next(".value").html(function (i, val) { 
       return val * 1 + 1; 
      }); 
     }); 

Answer 4

相反的：

$(".buttonsContainer button").click(function() { 
    ... 
}); 

用途：

$(document).on('click', '.buttonsContainer button', function() { 
    ... 
}); 

Answer 5

每次點擊一個div添加到您的表，你請撥打$('.down').click()即可t與「下」類的所有現有按鈕。添加多個單行使得對於單擊事件，您可以將多個處理程序附加到預先存在的按鈕上。

你可以很容易地解決這個問題，而不需要改變你的代碼。而不是直接追加新行，將其保存到變量中，然後將點擊處理程序添加到其中的向下/向上元素中：

var rowString = '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>'; 
var newRow = $($.parseHTML(rowString)); 

newRow.filter(".down").click(function() { 
    $(this).prev().prev(".value").html(function (i, val) { 
     return val * 1 - 1; 
    }); 
}); 
newRow.filter(".up").click(function() { 
    $(this).next(".value").html(function (i, val) { 
     return val * 1 + 1; 
    }); 
}); 

newRow.appendTo(".row");