JavaScript中的多级引用？

好吧，这也许是有史以来最愚蠢的问题，但请容忍我

如何做到这一点：

$("#basephoto").after(
  '<tr><td valign="bottom">Additional photo:</td>
       <td>&nbsp;&nbsp;&nbsp;</td>
       <td><div id="addphoto'+curupfld+'" class="browsebg">
         <p class="bpath"></p>
         <input onchange="fillBrowse(\"#addphoto'+curupfld+'\",this); validateExt(field);"  class="browse transfield" type="file" name="altphoto'+curupfld+'" size="40" />
         <span onclick="delImgField(this.id)" id="delbtn'+curupfld+'" class="abuttons delbtn"></span></div>
       </td>
   </tr>');

问题从“onchange”开始。我总是可以创建一个调用这两个函数的函数，解决方案是：

$("#basephoto").after(
  '<tr>
     <td valign="bottom">Additional photo:</td>
     <td>&nbsp;&nbsp;&nbsp;</td>
     <td>
       <div id="addphoto'+curupfld+'" class="browsebg">
       <p class="bpath"></p>
       <input onchange=functionCaller("#addphoto'+curupfld+'",this) class="browse transfield" type="file" name="altphoto'+curupfld+'" size="40" />
       <span onclick="delImgField(this.id)" id="delbtn'+curupfld+'" class="abuttons delbtn"></span>
       </div>
      </td>
   </tr>');

$（“#基本照片”）。之后(
'
其他照片：

');

---

这是可行的，但如果可能的话，我想解决这个问题，而不仅仅是使用变通方法。

使用类似下划线的模板系统。可维护，易于阅读/排除故障

例如：

    <script id="templateA" type="text/template">
          <p>
                 Test stuff <a href="/home.html"><%= label %></a>
                 ...
          </p>
    </script>
...

<script type="javascript">
        var templateFunction = _.template($('#templateA').html());
        $('#someDivID').after(templateFunction({label: 'Here'}));
</script>

测试材料
...

...
var templateFunction=35;.template（$（'#templateA'）.html（）；
$（'#someDivID'）。在（templateFunction（{label:'Here'}）之后；

我真的不知道你到底在干什么。但是如果你不想用更jQuery的方式来写它。。这可能会有帮助

$('#basephoto').append('<tr />');
$('#basephoto tr').append(
    $('<td />')
        .attr('valign','bottom')
        .html('Additional photo:')
);
$('#basephoto tr').append(
    $('<td />')
        .html('&nbsp;&nbsp;&nbsp;')
);
$('#basephoto tr').append(
    $('<td />')
        .html(
            $('<div />')
            .attr({
                "id":"addphoto-"+curupld,
                "class":"browsebg"  
            })
            .html(
                $('<p />')
                    .attr('class','bpath')
                    .html('')
            )
        )
);
$('#addphoto-'+curupfld).append(
    $('<input />')
        .attr({
            "class":"browse transfield",
            "type":"file",
            "name":"altphoto-"+curupfld,
            "size":"40"
        })
        .change(function(){
            functionCaller('#addphoto-'+curupfld,this);
            validateExt(field);
        })
);
$('#addphoto-'+curupfld).append(
    $('<span />')
        .attr({
            "class":"abuttons delbtn",
            "id":"delbtn-"+curupfld
        })
        .click(function(){
            delImgField($(this).attr('id'));
        })
);

---

*附言：不要说这很愚蠢。我和你以前一样……：]

您能更好地解释一下所需的行为吗？最好使用jQuery添加所有事件处理程序，因为您已经在使用它了。这真的很难维持现状。不要使用“字符串中的HTML”反模式，而是使用jQuery以增量方式构建元素。下次尝试使代码稍微可读。我已经尽我所能把它整理好了。哦，是的，很抱歉弄得一团糟@Pointy已经尝试过delgate（）或on（），但没有任何效果，可能是我使用了错误的选择器，其中包含了这些内容，因为页面中包含了php，而不是注入模板文件。我相信这是可以修复的，但我只是没有勇气发现James Johnson浏览器没有正确解析\“或\”在这种情况下，我想知道我是否在引用中犯了错误。你对我的期望太高了，我是个新手，可能没有足够的技能来使用它，而且我现在也不想重写一切。。。但即使如此，你还是让我对这个模板感兴趣，所以我会在未来的项目中继续使用它。当你从现在起六个月后回去需要修改东西时，你的项目确实会少很多工作。模板是一个不错的选择，在你的下一个项目中，你将在js中动态生成内容，试试看：）不，我不需要它看起来更像jquerysh我已经找到了解决方案，第二个问题发生了。我想知道的是，为什么我的第一个代码片段不起作用，是因为我弄乱了一些引号，如果可能的话，正确的修复方法。语法是这里的问题。给您的输入一个id或类，然后添加另一个jQuery行，如下所示：$（'#input'）.change（function（）{fillBrowse（'#addphoto'+curupfld，this）；validateExt（field）；}）；我做过类似的事情。我只是没有通过jQuery在选择器上分配事件，因为我在某个地方读到，它的性能是一个糟糕的举动，因为它扫描整个DOM树以找到一个选择器，这就是为什么他们制作了live（）、delegate（）、on（）等事件处理程序，可以缩小对live注入元素的搜索范围。（我可能错了，但那正是我当时所记得的）我所做的是创建一个调用这两个的函数，就这样。因为一个函数不需要像两个那样的三级引号，而且工作正常。请参阅我的第三个代码片段。

$('#basephoto').append('<tr />');
$('#basephoto tr').append(
    $('<td />')
        .attr('valign','bottom')
        .html('Additional photo:')
);
$('#basephoto tr').append(
    $('<td />')
        .html('&nbsp;&nbsp;&nbsp;')
);
$('#basephoto tr').append(
    $('<td />')
        .html(
            $('<div />')
            .attr({
                "id":"addphoto-"+curupld,
                "class":"browsebg"  
            })
            .html(
                $('<p />')
                    .attr('class','bpath')
                    .html('')
            )
        )
);
$('#addphoto-'+curupfld).append(
    $('<input />')
        .attr({
            "class":"browse transfield",
            "type":"file",
            "name":"altphoto-"+curupfld,
            "size":"40"
        })
        .change(function(){
            functionCaller('#addphoto-'+curupfld,this);
            validateExt(field);
        })
);
$('#addphoto-'+curupfld).append(
    $('<span />')
        .attr({
            "class":"abuttons delbtn",
            "id":"delbtn-"+curupfld
        })
        .click(function(){
            delImgField($(this).attr('id'));
        })
);

$('#input_that_has_the_change_event').change(function(){
    fillBrowse('#addphoto'+curupfld,this);
    validateExt(field);
});