“动态”创建元素 ID 在 jQuery 中不起作用 [关闭]答案

【问题标题】：Creating an element ID "on the fly" doesn't work in jQuery [closed]“动态”创建元素 ID 在 jQuery 中不起作用 [关闭]
【发布时间】：2013-04-11 15:24:22
【问题描述】：

我有以下 HTML 结构：

<div class='message_top' id='top_7' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_7'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

除此之外，还有很多其他结构相同，但ID号不同的DIV，例如：

<div class='message_top' id='top_15' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_15'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

现在，我有一个 jQuery 函数，它获取 .message_top div 的 ID，它应该使用属于它的 .top_status div 的内容执行操作。但是，由于某种原因，在语法中它似乎无法识别 .top_status div 的 ID。我知道我不会很好地解释这一点，但这里有一个小提琴可以帮助你理解（代码和评论都在那里）：

http://jsfiddle.net/gMy2f/1/

$(function () {
    $('.message_top').click(function(){
        var id = this.id;
        status_id = id.replace("top","status");
        status = $("#"+status_id).html();
        alert(status_id+" "+status);    //status variable is empty, but...
        status2 = $("#status_7").html();
        alert(status2);                 //status2 has the expected value
    });
});

所以，如您所见，如果我使用$("#status_7").html(); 调用.html() 方法，它可以正常工作，但如果我使用$("#"+status_id).html();（status_id 为“status_7”）调用它，它就不起作用。这里发生了什么事？我用过很多次类似的代码，从来没有遇到过任何问题。

【问题讨论】：

如果您将代码加载到正确的位置似乎可以正常工作（提示：在文档准备好或加载时）。 jsfiddle.net/j08691/gMy2f/4
@j08691 我刚刚尝试了您的代码，但它的失败方式与我的相同（至少在 Firefox 中） - 我很确定我的加载方式很好。
该代码在 Firefox 19.0.2 中运行良好，可能是浏览器兼容性问题？
@gbtimmon 我认为这种创建 ID 的方式是非常标准的，肯定不能是特定于浏览器的吗？另外，我也在用firefox。
当你忘记var时会发生坏事！！

标签： javascript jquery

【解决方案1】：

使用本地变量而不是全局变量。 window.status 是预定义的并且可能是只读的。

我今天才回答这个问题：Does Javascript / jQuery have system vars?

Updated jsFiddle.

【讨论】：

确实如此。只需在变量定义前添加var 即可解决问题。谢谢。
@jovan 这可以解释为什么它在 jsfiddle 中有效，但在您的浏览器中无效。我相信，但可能是错误的，jsfiddle 将所有 javascripts 变量放在一个容器对象中，以将用户代码与页面代码分开，即使它们是全局声明的。
@gbtimmon：嗯。我不这么认为。小提琴在 Firefox 中对我不起作用（在 Firefox 中 window.status 默认为只读）。 jsFiddle 在 iframe 中执行代码，但这应该对此有任何影响。
我的 firefox 和你的不一样...检查后，我可以从控制台编辑 window.status。奇怪....
@gbtimmon：可以，你可以让window.status可写：developer.mozilla.org/en-US/docs/DOM/window.status。