Question

我想从代码创建元素并在onclick，element中添加为参数。我试过这个：my fiddle

$(document).ready(function(){
    elementToPass = $('.aaa').children()[0];
    var element = '<div class="ccc" onclick="myFun(' + elementToPass + ')">ccc</div>';
    $('.aaa').append(element);
});
    
myFun = function(){
    console.log('its working');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="aaa">
    <div class="bbb">
        bbb
    </div>
</div>

但它导致错误; /

Answer 1

在代码中分配事件处理程序要比分配内联事件处理程序好得多。在这个特定的实例中，它意味着您可以动态地将元素传递给函数，而不是尝试在内联处理程序中对引用进行硬编码。

将其更改为此...

$(document).ready(function(){
    elementToPass = $('.aaa').children()[0];
    var element = '<div class="ccc">ccc</div>';

    element.onclick = function() {
        myFun(elementToPass);
    }

    $('.aaa').append(element);
});

Answer 2

注意元素本身与连接到其他字符串

时转换为字符串的变量之间的区别

即。不执行：'some text' + elementToPass + 'remaining text' 因为elementToPass将成为字符串而不是您想要的对象

$(document).ready(function(){
    var elementToPass = $('.aaa').children()[0];
    var element = '<div class="ccc" onclick="myFun()">ccc</div>';
    $('.aaa').append(element);

    myFun = function(){
        console.log('its working: ' + elementToPass);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="aaa">
    <div class="bbb">
        bbb
    </div>
</div>

从onclick传递元素Html

2 个答案: