JavaScript中的多级引用？

Posted 2023-02-24

【中文标题】JavaScript中的多级引用？

【英文标题】：Multilevel quote in JavaScript?

【发布时间】：2012-04-14 14:20:58

【问题描述】：

好吧，这可能是有史以来最愚蠢的问题，但请耐心等待......

如何使这项工作：

$("#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="fillBrowse(\"#addphoto'+curupfld+'\",this); validateExt(field);"

问题从“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>');

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

【问题讨论】：

您能否更好地解释所需的行为？

用 jQuery 添加所有事件处理程序会更好，因为无论如何您已经在使用它了。这是一个非常难以维护的混乱局面。代替“字符串中的 html”反模式，使用 jQuery 逐步构建元素。

下次尝试让您的代码稍微可读。我已经尽我所能解决了。

哦，是的，很抱歉弄得一团糟； @Pointy 已经尝试过 delgate() 或 on() 并且它没有任何效果可能我使用了包含这些的错误选择器，因为页面包含的 php 比注入模板文件好我确信它可以修复但我只是没有'没有勇气弄清楚 James Johnson 浏览器在这种情况下无法正确解析 \" 或 \' 所以我想知道我是否在配额中的某个地方犯了错误

【参考方案1】：

我真的不知道你到底在做什么。但是，如果您只是不想以更 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 创建元素：

http://mongsang-ga.tumblr.com/post/19914049827/how-to-create-a-element-in-jquery

我猜你只需要添加这样一行然后修复你的 问题：

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

*P.S.：不要说这很愚蠢。我和你以前一样.. :]

【讨论】：

不，我不需要它看起来更像 jqueryish 我已经找到了第二个问题发生的解决方案。我想知道的是为什么我的第一个代码 sn-p 不起作用，是因为我弄乱了一些引号，如果可能的话，这是修复它的正确方法。语法是这里的问题。

给你的输入一个 id 或一个类，然后添加另一个像这样的 jQuery 行： $('#input').change(function()fillBrowse('#addphoto'+curupfld ,this);validateExt(field););

我做了类似的事情。我只是没有通过 jQuery 在选择器上分配事件，因为我在某处读到它的性能明智是一个糟糕的举动，因为它会扫描整个 DOM 树以找到选择器，这就是为什么他们制作了像 live()、delegate() 这样的事件处理程序， on() 可以缩小搜索一个句柄活注入元素的范围。（我可能错了，但那是我当时记得的）我所做的是创建一个调用这两个函数的函数，仅此而已。因为一个函数不需要像两个那样的 3 级引号并且工作得很好。看我的第三个 sn-p。

【参考方案2】：

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

http://documentcloud.github.com/underscore/

例子：

    <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>

【讨论】：

你对我的期望太高了，我是新手，可能不够熟练使用它，而且我现在不想重写所有内容......但即便如此你得到了我对这个模板很感兴趣，所以我会在未来的项目中继续使用它

当您从现在开始六个月后返回并需要修改内容时，它确实使您的项目工作量减少了很多。模板是要走的路，在你的下一个项目中，你可以在 js 中动态生成内容，试试看 :)