后续事件未触发

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