Question

我想将此附加到我的文档中：

$('#myDiv).append("<div id='myDiv2' onclick="+extElementConfig.onClickDo+">Do</div>");

上面的代码段由某个具有属性的对象填充onClick，这样：

var extElementConfig={onClickDo:sampleFunc()};

不幸的是，在对象属性中声明一个函数也会像预期的那样触发它。

如何在不触发的情况下实现上述功能 sampleFunc（）？我只需要通过对象属性动态填充onClick事件。

Answer 1

假设您可以控制extElementConfig对象，请从sampleFunc

中删除括号

var extElementConfig={extElementPosition :10,extElementId:'mailOrderBtn',onClickDo:sampleFunc};

Answer 2

作为罗布。 M.指出你的代码的真正问题在于你在代码中运行代码而不是分配引用。当你试图分配onclick时，由于你试图在字符串时使用函数引用，因此也存在问题。

要让你的代码运行，它会是这样的

function sampleFunc () {
  alert("clicked");
}

var extElementConfig={onClickDo:"sampleFunc()"}; 

$('#myDiv').append("<div id='myDiv2' onclick='"+extElementConfig.onClickDo+"()'>Do</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv"></div>

要摆脱这种情况，不要使用sting方法来构建元素，而是利用jQuery的强大功能。下面是一个示例，我构建一个div并传入一些参数，以便在单击时更改元素的文本和css。

    function sampleFunc(txt, css) {
        $(this).text(txt).css(css);
    }
    
    var extElementConfig = {
        onClickDo: sampleFunc,
        onClickArgs : ["Clicked", {"background-color":"green"}]
    };
    
    $('<div/>', {
            id: 'myDiv2',
            text: 'Do!'
        }
    ).on("click", 
        function() {  
             extElementConfig.onClickDo.apply(this, extElementConfig.onClickArgs); 
        } 
    ).appendTo("#myDiv");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="myDiv"></div>

onClick由变量填充而不触发它

2 个答案: