Question

这是我的代码的简化版本。我猜我没有正确创建iDiv，因为这行$('#iDiv').click(function(){永远不会发生。

不确定我做错了什么，并希望有任何建议可以尝试。

谢谢！

$(document).ready(function() {
    $('buttonx').click(function(){
        createiDiv();
    });

    //this works great:
    $('#iframeWrapper').click(function(){   
        var localiDiv = document.getElementById("iframeWrapper");
        localiDiv.style.backgroundColor = "aqua"; 
    });

    // but iDiv is not recognized here and I can't figure out why   
    $('#iDiv').click(function(){    
        var localiDiv = document.getElementById("iframeWrapper");
        localiDiv.style.backgroundColor = "lime"; 
    });
});

function createiDiv(){
    var iDiv = document.createElement('div');
    var iframeWrapper = document.getElementById ('iframeWrapper');
    iDiv.style.backgroundColor = "lime";
    iDiv.id = 'iDivID'; - made change so this is = 'iDiv'
    iDiv.style.width = "600px";
    iDiv.style.height = "400px";
    iframeWrapper.appendChild(iDiv);
}
</script>
</head>

<body>
    <div id="iframeWrapper"></div>
</body>

Answer 1

您需要将元素的id设置为您尝试在jQuery选择器中使用的相同值：

iDiv.id = 'iDivID';

应该是

iDiv.id = 'iDiv';

否则

$('#iDiv').click();

无效，因为使用$('#iDiv')的jQuery选择器显式查找DIV id iDiv（而不是iDivID）的createiDiv()元素

当然，正如评论中提到的另一个用户，你需要实际调用你的iDiv.style.backgroundColor = "lime"; iDiv.style.width = "600px"; iDiv.style.height = "400px";函数才能执行函数中的代码，我假设你已经知道（和做）那个（代码中的某个地方你还没有发布过。）

此外，您应该在元素创建之后合并点击处理程序，而不是之前。（我没有注意到这个错误 - 用户 Felix Kling 建议它）

<强>提示

由于您已经在使用jQuery，因此可以稍微优化您的代码，使其更紧凑。

例如你可以改变：

$('#iDiv').css({ 'background-color': 'lime', 'width': 600, 'height': 600 });

为：

width

请注意，除非您为变量使用已保留的名称，否则您不必将密钥（height，backgroundColor等）放在引号中。您也可以使用background-color代替-，因为jQuery可以理解这两者。请记住，如果您在密钥中使用连字符function createiDiv(){ var iDiv = document.createElement('div'); var iframeWrapper = document.getElementById('iframeWrapper'); iDiv.id = 'iDiv'; iDiv.style.backgroundColor = "lime"; iDiv.style.width = "600px"; iDiv.style.height = "400px"; iframeWrapper.appendChild(iDiv); $(iDiv).click(function(){ var localiDiv = document.getElementById("iframeWrapper"); localiDiv.style.backgroundColor = "lime"; }); // please note that you can use the DOM element `iDiv` in the jQuery selector (you don't have to use the ID if you have the actual element referenced in a variable) }，则应将密钥放在引号中。

<强>更新

以下是有关如何在生成元素后应用单击处理程序的示例：

function createiDiv(){ $('<div/>') .attr('id', 'iDiv') .css({ 'background-color': 'lime', 'width': 600, 'height': 600 }) .click(function(){ $('#iframeWrapper').css('background-color', 'lime'); }) .appendTo('#iframeWrapper'); }

这是一个相同功能的例子，但完全针对jQuery进行了优化：

{{1}}

Answer 2

您的ID不同：

iDiv.id = 'iDivID';

$('#iDiv').click(function(){

一个是iDivID，一个是iDiv，请确保它们都是相同的。

您将ID设置为＆＃34; iDivID＆＃34;在第一行。在第二行中，您尝试通过CSS选择器访问它，引用具有ID＆＃34; iDiv＆＃34;

的元素

Answer 3

可能是因为永远不会调用createiDiv()函数。

$(document).ready(function () {
    //this works great:
    $('#iframeWrapper').click(function () {
        var localiDiv = document.getElementById("iframeWrapper");
        localiDiv.style.backgroundColor = "aqua";
    });

    //create iDiv
    createiDiv();

    // but iDiv is not recognized here and I can't figure out why   
    $('#iDiv').click(function () {
        var localiDiv = document.getElementById("iframeWrapper");
        localiDiv.style.backgroundColor = "lime";
    });
});

function createiDiv() {
    var iDiv = document.createElement('div');
    var iframeWrapper = document.getElementById('iframeWrapper');
    iDiv.style.backgroundColor = "lime";
    iDiv.id = 'iDivID';
    iDiv.style.width = "600px";
    iDiv.style.height = "400px";
    iframeWrapper.appendChild(iDiv);
}

请参阅此处示例http://jsfiddle.net/ZRB2T/

Answer 4

为了将事件分配给动态添加的元素，请使用事件委托，例如

而不是

$('#iframeWrapper').click(function(){

使用

$('#iframeWrapper').on('click', function(){

参考

Jquery on

无法访问动态创建的Javascript div

4 个答案: