后续事件未触发

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来绑定事件。它在引擎盖下使用事件冒泡来触发事件。这将是一个更大的故事，如果我开始写完整的事件委托在这里。所以请在这里阅读。

你的工作代码是这里

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);
            }
    });
    }); 
//  }); 
//});