如何從 onclick 將元素傳遞給函數？

Question

我想從代碼中創建元素並在 onclick 元素中添加為參數。 我試過這個：我的小提琴

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