Question

这是实际代码，如何正确地将list[i].fnctn传递给点击处理程序？

list[i].fnctn - 包含我要附加到click事件处理程序的函数的名称。

function createList(list){
    var parentID = $("#content_nav ul");
    var len = list.length;
    for(var i=0;i<len;i++){
        var anchorElement = jQuery('<a />',{text:list[i].text});
        var liElement = jQuery('<li />',{"class":"navlink_"+(i+1),id:"navlink_"+(i+1)});
        //anchorElement.attr('onclick',list[i].fnctn+"()"); - Works fine on desktop browsers but doesn't work on mobile devices. (Mobile devices are my target platform

        anchorElement.on('click',function(event) {
            return window[list[i].fnctn](event); // Here I am getting the error - cannot access property fnctn of undefined
        });
        liElement.append(anchorElement);
        parentID.append(liElement);
    }
}

Answer 1

这会有帮助，我不确定.on()方法是否可行。

var message = 'Some value that I want to access inside handler function';


$('#myHandler').click({msg: message},function(e){
    alert(e.data.msg);
});

<强>编辑：

正如xiaowl所说。更改您的方案的代码。

function myFunction(){
    var message= "Some value that I want to access inside handler function";
    $("#myHandler").on('click', {msg: message}, function(e){
        alert("I want to alert the value - " + e.data.msg);
    });
}

对于实际情况

function createList(list){
    var parentID = $("#content_nav ul");
    var len = list.length;
    for(var i=0;i<len;i++){
        var anchorElement = jQuery('<a />',{text:list[i].text});
        var liElement = jQuery('<li />',{"class":"navlink_"+(i+1),id:"navlink_"+(i+1)});
        anchorElement.on('click',{myFunction: list[i]}, function(event) {
            return window[event.data.myFunction](event);
        });
        liElement.append(anchorElement);
        parentID.append(liElement);
    }
}

Answer 2

http://api.jquery.com/on/

.on（events [，selector] [，data]，handler（eventObject））

事件一个或多个以空格分隔的事件类型和可选命名空间，例如“click”或“keydown.myPlugin”。

selector 一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

数据触发事件时要传递给event.data中处理程序的数据。

handler（eventObject）触发事件时要执行的函数。值false也允许作为简单返回false的函数的简写。

因此，在您的处理程序中，使用event.data['xyz']来检索数据。

Answer 3

您的问题与传递参数无关，但与范围有关。循环后i将为=== len，并且所有函数都引用相同的i，这甚至不是数组中的索引。

尝试使用$.each，因为它透明地为您提供免费关闭：

function createList(list) {

    var parentID = $("#content_nav ul");

    $.each(list, function(i, v) {
        var anchorElement = jQuery('<a />', {
            text: v.text
        });
        var liElement = jQuery('<li />', {
            "class": "navlink_" + (i + 1),
            id: "navlink_" + (i + 1)
        });
        anchorElement.on('click', function(event) {
            return window[v.fnctn](event); // Here I am getting the error - cannot access property fnctn of undefined
        });
        liElement.append(anchorElement);
        parentID.append(liElement);
    });
}

Answer 4

function myHandler(event) {
    alert(event.data.foo);
}

$("p").on("click", {foo: "bar"}, myHandler)

以下是一个示例：http://api.jquery.com/on/

在您的版本中，我认为：

function myFunction(){

    var xyz = "Some value that I want to access inside handler function";

    $("#myHandler").on('click', {msg: xyz}, function(event){

        alert("I want to alert the value - " + event.data.msg);
        //Error is logged in console as xyz is undefined.

    });
}

myFunction();

更新：工作正常。

Upd2：以上是您的问题示例。 http://jsfiddle.net/kjLmm/

Upd3：所以，您可以将列表元素作为参数传递，如上例所示：

anchorElement.on('click', {element: list[i]}, function(event) {
            return window[event.data.element.fnctn](event); // Here I am getting the error - cannot access property fnctn of undefined
        });

Answer 5

你需要匹配值，试试这个：

Here is jsFiddle.

function myFunction(){

    var xyz = "Some value that I want to access inside handler function";

    $(document).on('click','#myHandler',function(event){

        var takeId = this.id;

        if ( takeId === xyz ) {
           alert("your id is equal to"+xyz);
           //Error is logged in console as xyz is undefined.
        }else{
           alert("your id is not equal to"+xyz);
        }

    });
}

$(function() {//dont forgot to call function
    myFunction();
});

jQuery事件处理函数 - 如何传递我自己的参数

5 个答案: