0

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

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

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);
    }
}
4

5 回答 5

3

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

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


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

编辑：

正如小猫所说。为您的场景更改我的代码。

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);
    }
}
于 2012-08-01T08:39:25.297 回答
1

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

.on（事件 [，选择器] [，数据]，处理程序（事件对象））

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

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

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

handler(eventObject)触发事件时执行的函数。值 false 也可以作为简单返回 false 的函数的简写。

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

于 2012-08-01T08:38:31.850 回答
1

您的问题与传递参数无关，而是与范围有关。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);
    });
}
于 2012-08-01T08:51:27.240 回答
0 
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
        });
于 2012-08-01T08:37:52.760 回答
0

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

这是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();
});
于 2012-08-01T08:39:25.717 回答