後續事件沒有觸發

Question

我知道我錯過了一些簡單的事情，但這是我第一個jQuery項目，我只是沒有找到問題。當我關閉代碼塊（}）時; ）爲#AddTopTier按鈕，沒有別的工作。我可以在所有事件結束之前把事情做得很好，但事情會使每個事件都依賴於事件 - 這會產生問題。

我已經創建此琴：https://jsfiddle.net/tLx8epqr/1/

對於那些誰不想去那裏，這裏有一些細節。

我有這樣的：

$(document).ready(function(){ 
    var i = 1 
    var s = 1 

    //Add code for Tier display 
    $('#AddTopTier').click(function(){ 
     var tierStr="<DIV ID='divTier"+i+"' style='width: 400px; border:2px dotted #0099CC; padding: 5px;'>" 
      tierStr=tierStr + "<INPUT TYPE='text' size='20' NAME='inputName"+i+"' ID='inputName"+i+"' VALUE='"+ $('#NewTierName').val()+ "'></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='text' ID='Tier"+i+"' NAME='Tier"+i+"' CLASS='tierScore"+i+"' VALUE='30' SIZE='2' MAXLENGTH='3' DISABLED></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='button' ID='btnUpTier"+i+"' CLASS='upTier' VALUE='+'></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='button' ID='btnDownTier"+i+"' CLASS='dwnTier' VALUE='-'></INPUT>" 
      tierStr=tierStr + "&nbsp;&nbsp;<INPUT TYPE='button' ID='btnAddSkill"+i+"' CLASS='btnAddSkill' VALUE='Add Skill'></INPUT>" 
      tierStr=tierStr + "</DIV><p/>" 
     i++; 
     $('#Contents').append(tierStr); 
    //End Tier display 
    }); //This is the issue. Closing the code block here prevents the next code block from executing. I can move this to the end, but that creates and unacceptable dependency. 

//Add code for Skill display 
$(".btnAddSkill").unbind().click(function(){ 

//make sure there are enough Skill Points 
if(parseFloat($('#SkillPts').val()) < 1){ 
     alert("You don't have enough skill points.") 
    } 
else 
    { 
//find the name of the div and strip out 'div' to leave the tier name 
var tier = ($(this).parent('div').attr('id')); 
    tier = tier.replace("div",""); 

    var skillStr="<br/> &nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE='text' size='20' ID='skillName"+i+"' VALUE=''></INPUT>" 
    skillStr=skillStr + "<INPUT TYPE='text' NAME='Skill"+s+"' ID='Skill"+s+"' CLASS='skill"+tier+"' VALUE='' SIZE='2' MAXLENGTH='3' DISABLED></INPUT>" 
    skillStr=skillStr + "<INPUT TYPE='button' ID='btnUpSkill"+s+"' CLASS='upSkill' VALUE='+'></INPUT>" 
    skillStr=skillStr + "<INPUT TYPE='button' ID='btnDownSkill"+s+"' CLASS='dwnSkill' VALUE='-'></INPUT>" 

//append this to the div associated with the appropriate Tier for display 
$(this).parent('div').append(skillStr); 

//find the name of the div and strip out 'div' to leave the tier name 
var tier = ($(this).parent('div').attr('id')); 
    tier = tier.replace("div",""); 

//Find the skill's Tier Score, add 5   
    $('#Skill'+s).val(parseFloat($('#'+tier).val())+5); 

//Decrease the available Skill Points by 1 
$('#SkillPts').val(parseFloat($('#SkillPts').val())-1); 
    s++ 
    } 
//End Skill display 
}); //...and so on... 

如前所述，我預計#AddTopTier事件可允許.btnAddSkill事件執行關閉，但這沒有發生。

（順便說一句：我知道這是不是優美的代碼 - 正如我所說，這是我第一次嘗試 - 種去大或回家這個問題是在得到它清理的步驟之一。）

提前致謝。

Answer 1

首先，您必須瞭解事件綁定是如何工作的。因爲我們將它寫入文檔就緒處理程序中，所以一旦頁元素被加載，事件將被綁定到基於選擇器提供的元素上。在那段時間（元素被加載之後），如果元素與找不到的選擇器相匹配，那麼這個事件處理程序就沒用了。這是你的情況，你將事件綁定到將來要添加的元素上。所以你的代碼不會工作。在這種情況下，您必須使用event delegation來綁定事件。它使用引擎蓋下的事件冒泡來觸發事件。如果我在這裏開始寫關於事件代表團的話，這將是一個更大的故事。所以請閱讀here。

而你的工作代碼去here

Answer 2

你好你的解決方案！

$(document).ready(function(){ 
    var i = 1 
    var s = 1 

    //Add code for Tier display 
    $('#AddTopTier').click(function(){ 
     var tierStr="<DIV ID='divTier"+i+"' style='width: 400px; border:2px dotted #0099CC; padding: 5px;'>" 
      tierStr=tierStr + "<INPUT TYPE='text' size='20' NAME='inputName"+i+"' ID='inputName"+i+"' VALUE='"+ $('#NewTierName').val()+ "'></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='text' ID='Tier"+i+"' NAME='Tier"+i+"' CLASS='tierScore"+i+"' VALUE='30' SIZE='2' MAXLENGTH='3' DISABLED></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='button' ID='btnUpTier"+i+"' CLASS='upTier' VALUE='+'></INPUT>" 
      tierStr=tierStr + "<INPUT TYPE='button' ID='btnDownTier"+i+"' CLASS='dwnTier' VALUE='-'></INPUT>" 
      tierStr=tierStr + "&nbsp;&nbsp;<INPUT TYPE='button' ID='btnAddSkill"+i+"' CLASS='btnAddSkill' VALUE='Add Skill'></INPUT>" 
      tierStr=tierStr + "</DIV><p/>" 
     i++; 
     $('#Contents').append(tierStr); 
    //End Tier display 
    }); 

    //Add code for Skill display 
    $("#Contents").on("click", ".btnAddSkill", function(event) { 

    //make sure there are enough Skill Points 
    if(parseFloat($('#SkillPts').val()) < 1){ 
      alert("You don't have enough skill points.") 
     } 
    else 
     { 
    //find the name of the div and strip out 'div' to leave the tier name 
    var tier = ($(this).parent('div').attr('id')); 
     tier = tier.replace("div",""); 

     var skillStr="<br/> &nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE='text' size='20' ID='skillName"+i+"' VALUE=''></INPUT>" 
     skillStr=skillStr + "<INPUT TYPE='text' NAME='Skill"+s+"' ID='Skill"+s+"' CLASS='skill"+tier+"' VALUE='' SIZE='2' MAXLENGTH='3' DISABLED></INPUT>" 
     skillStr=skillStr + "<INPUT TYPE='button' ID='btnUpSkill"+s+"' CLASS='upSkill' VALUE='+'></INPUT>" 
     skillStr=skillStr + "<INPUT TYPE='button' ID='btnDownSkill"+s+"' CLASS='dwnSkill' VALUE='-'></INPUT>" 

    //append this to the div associated with the appropriate Tier for display 
    $(this).parent('div').append(skillStr); 

    //find the name of the div and strip out 'div' to leave the tier name 
    var tier = ($(this).parent('div').attr('id')); 
     tier = tier.replace("div",""); 

    //Find the skill's Tier Score, add 5   
     $('#Skill'+s).val(parseFloat($('#'+tier).val())+5); 

    //Decrease the available Skill Points by 1 
    $('#SkillPts').val(parseFloat($('#SkillPts').val())-1); 
     s++ 
     } 
    //End Skill display 
    }); 

//*****Tier Adjustments***** 
    //Increase Tier scores 
    $("#Contents").on("click", ".upTier", function(event) { 

    //strip out 'btnUp' from the button name, leaving the Tier name 
    var tier = (this.id.replace('btnUp',"")); 

    //make sure there are enough Skill Points 
    //Determine the high skill penalty 
     function upSkillMod(currVal){ 
      var tierMod 
      var currVal = parseFloat(currVal) 
       if(currVal == 50 || currVal == 55 || currVal == 60){ 
        tierMod = 2 
        } 
       else if(currVal == 65 || currVal == 70){ 
        tierMod = 3 
        } 
       else if (currVal > 70){ 
        tierMod = 4 
        } 
       else{ 
        tierMod = 1 
        } 
       return tierMod 
       }; 
    //Update the skill points to reflect 2 per tier, plus high skill penalty 
     var oldScore = parseFloat($('.upTier').siblings('#'+tier).val()) 
     var newTierScore = parseFloat(2 * (upSkillMod(oldScore))) 
     var currPts = parseFloat($('#SkillPts').val()) 

     if(currPts > newTierScore || currPts == newTierScore){ 
      newTierScore = currPts - newTierScore 
       $('#SkillPts').val(newTierScore)     

      //add 5 to the old value, display value 
      var newScore = oldScore + 5 
       $('.upTier').siblings('#'+tier).val(newScore); 

      //increase any Skills which may be under the Tier 
      $(this).siblings(".skill"+tier).each(function(){ 
       //extract the name 
       skillNum = $(this).prop('name') 
        var currVal = parseFloat($('#'+skillNum).val()) + 5; 
         $('#'+skillNum).val(currVal) 
       }); 
       } 
      else{ 
        alert("You don't have enough skill points.")  
       }; 

    //Decrease Skill Points by 2 points times skillMod 
     function upSkillMod(currVal){ 
      var tierMod 
      var currVal = parseFloat(currVal) 
       if(currVal == 55 || currVal == 60 || currVal == 65){ 
         tierMod = 2 
         } 
        else if(currVal == 70 || currVal == 75){ 
         tierMod = 3 
         } 
        else if (currVal > 70){ 
         tierMod = 4 
         } 
        else{ 
         tierMod = 1 
         } 
        return tierMod 
      }; 
     //Update the skill points to reflect 2 per tier, plus high skill penalty 
     var oldScore = parseFloat($('.upTier').siblings('#'+tier).val()) 
     var newScore = oldScore - 5 
     var newTierScore = parseFloat(2 * (upSkillMod(newScore))) 
      newTierScore = parseFloat(($('#SkillPts').val())) - newTierScore 
       $('#SkillPts').val(newTierScore) 
      }); 

    //Decrease Tier scores 
    $("#Contents").on("click", ".dwnTier", function(event) { 

     //strip out 'btnDown' from the button name, leaving the Tier name 

     var tier = (this.id.replace('btnDown',"")); 
     //make sure that the score does not go below 25 

     if($('.dwnTier').siblings('#'+tier).val() <= 25){ 
       alert("Tiers cannot be taken below 25.") 
      } 
     else 
      { 
      //get the value of the related tier and add 5, display value 
      var newScore = parseFloat($('.upTier').siblings('#'+tier).val()) - 5  
       $('.upTier').siblings('#'+tier).val(newScore); 

      //increase any Skills which may be under the Tier 
       $(this).siblings(".skill"+tier).each(function(){ 
        //extract the name 
        skillNum = $(this).prop('name') 
        var currVal = parseFloat($('#'+skillNum).val()) - 5; 
        $('#'+skillNum).val(currVal)      
       }); 
      //Decrease the available Skill Points by 2 points times skillMod 
      function dwnSkillMod(currVal){ 
       var tierMod 
         var currVal = parseFloat(currVal) 
          if(currVal == 50 || currVal == 55 || currVal == 60){ 
           tierMod = 2 
           } 
          else if(currVal == 65 || currVal == 70){ 
           tierMod = 3 
           } 
          else if (currVal > 70){ 
           tierMod = 4 
           } 
          else{ 
           tierMod = 1 
           } 
          return tierMod 
      }; 
     //Update the skill points to reflect 2 per tier, plus high skill penalty 
     var newTierScore = parseFloat(2 * (dwnSkillMod(newScore))) 
      newTierScore = parseFloat(($('#SkillPts').val())) + newTierScore 
       $('#SkillPts').val(newTierScore) 
      }; 
     }); 

//*****Skill Adjustments***** 
    //Increase Skill scores 
    $("#Contents").on("click", ".upSkill", function(event) { 

     //strip out 'btnUp' from the button name, leaving the Skill name 
     var skill = (this.id.replace('btnUp',"")); 

     //make sure there are enough Skill Points 

//!!!Need to validate points versus total cost 
    //make sure there are enough Skill Points 
    //Determine the high skill penalty 
     function upSkillMod(currVal){ 
      var skillMod 
      var currVal = parseFloat(currVal) 
       if(currVal == 50 || currVal == 55 || currVal == 60){ 
        skillMod = 2 
        } 
       else if(currVal == 65 || currVal == 70){ 
        skillMod = 3 
        } 
       else if (currVal > 70){ 
        skillMod = 4 
        } 
       else{ 
        skillMod = 1 
        } 
       return skillMod 
       }; 
    //Update the skill points to reflect 2 per tier, plus high skill penalty 
     var oldScore = parseFloat($('.upSkill').siblings('#'+skill).val()) 
     var newSkillScore = parseFloat(1 * (upSkillMod(oldScore))) 
     var currPts = parseFloat($('#SkillPts').val()) 


     if(currPts > newSkillScore || currPts == newSkillScore){ 
      newSkillScore = currPts - newSkillScore 
       $('#SkillPts').val(newSkillScore)    

        //add 5 to the old value, display value 
        var newScore = oldScore + 5 
        $('.upTier').siblings('#'+skill).val(newScore); 
       } 
      else{ 
        alert("You don't have enough skill points.")  
       }; 
      }); 
//**** 

    //Decrease Skill scores 
    $("#Contents").on("click", ".dwnSkill", function(event) { 

     //strip out 'btnDown' from the button name, leaving the Skill name 
     var skill = (this.id.replace('btnDown',"")); 

//!!!Validate to make sure the skills do not drop below associated tier 
    var skillComp = $('.dwnSkill').siblings('#'+skill).val(); 
    var tierName = "#Tier"+(this.id.replace('btnDownSkill',"")); 
    var tierComp = $(tierName).val() 

    if (skillComp <= 30){ 
       alert("Skills cannot be taken below 30.") 
      } 
     else if (skillComp - 5 == tierComp){ 
      alert("Skills cannot drop equal to or lower than the Tier.") 
      } 
     else 
      { 
       //get the value of the related tier and add 5, display value   
       $('.dwnSkill').siblings('#'+skill).val(parseFloat($('.dwnSkill').siblings('#'+skill).val()) - 5); 

       //Increase the available Skill Points by 1 
       $('#SkillPts').val(parseFloat($('#SkillPts').val())+1); 
      } 
    }); 
    }); 
// }); 
//});