jquery - 后续事件未触发

Question

我知道我错过了一些简单的东西，但这是我的第一个 jQuery 项目，我只是没有找到问题。当我关闭代码块(})时； )对于 #AddTopTier 按钮，其他任何方法都不起作用。我可以将结束时间移至所有事件结束之前，并且一切正常，但这使得每个事件都依赖于正在进行的事件 - 这会产生问题。

我创建了这个 fiddle :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

首先，您必须了解事件绑定(bind)的工作原理。加载页面元素后，事件将根据提供的选择器绑定(bind)到元素，因为我们将其写入文档就绪处理程序中。在此期间(元素加载后立即)，如果元素与未找到的选择器匹配，则该事件处理程序将毫无用处。这就是您的情况，您将事件绑定(bind)到将来将添加的元素。所以你的代码将无法工作。在这种情况下，您必须使用事件委托(delegate)来绑定(bind)事件。它在底层使用事件冒泡来触发事件。如果我开始在这里完整地写下事件委托(delegate)，那将是一个更大的故事。所以请阅读它 here .

你的工作代码是 here