JavaScript：如何在動態生成的jQuery .click（）函數中發送函數參數？

我有一個ajax請求，它返回我JSON數據（對象數組）。迭代這個數組我生成一個鏈接列表。我想設置一個onClick事件並從ajax響應調用一個帶params的函數。JavaScript：如何在動態生成的jQuery .click（）函數中發送函數參數？

這聽起來可能不太清楚，所以這裏有一個例子：

function test(param1) { 
    // ... 
} 

$.ajax({ 
    url: 'getSomeData.php', 
    type: 'post', 
    data: data, 
    success: function(result){ 
     var result = JSON.parse(result); 
     $div = $('<div />'); 

     for (i in result.someObject) { 
      $div.append('<a href="#" id="linkID' + i + '">ajax link ' + i + '</a>'); 
      $('#linkID' + i).click(function(){ 
       test(result.someObject[i]); // <--- My question is here 
       return false; 
      }); 
     } 
     $(document.body).append($div); 
    } 
});

在我的功能test我總是得到迭代數組的最後一個對象。我有一些想法爲什麼發生這種情況，但我不知道如何解決它。

來源

2012-04-27 SaltLake

@Anonymoose真實的，但無關描述的錯誤。如果宣佈它將會失敗。 – Alnitak 2012-04-27 10:23:20

這是一個與範圍的問題我的，如果你使用閉包來限制它的範圍，像下面的點擊事件處理程序，它應該沒問題。

(function(i) { 
    $('#linkID' + i).click(function(){ 
    test(result.someObject[i]); // <--- My question is here 
    return false; 
    }); 
})(i);

這可以保證我處於創建處理程序時的值，而不是它的最後一個值。

來源

2012-04-27 10:18:00 GillesC

這是正確的：'（function（i，j）{/ * ... * /}（i，j）;'如果我想限制多個變量的範圍嗎？我實際上不明白最後一部分'}）（i）;'它做了什麼？ – SaltLake 2012-04-27 10:48:24

@SaltLake是的，這是多個參數的正確語法。最後一部分只是使用提供的參數立即調用該函數。使用'eventData'方法添加多個參數也很簡單 - 只需將它們添加到地圖即可。 – Alnitak 2012-04-27 11:20:52

可以通過使用jQuery.proxy()

簡單實例傳遞一個上下文（以及因此變量）：

MyObject = function() { 
    this.element = $('#element'); 
    this.some_var = 'It works!'; 

    this.element.click($.proxy(this.handleClick, this)); 
}; 

MyObject.prototype.handleClick = function() { 
    console.log(this.some_var); 
}; 

var m = new MyObject();

從jQuery文檔示例：

<script> 
var me = { 
    type: "zombie", 
    test: function(event) { 
    // Without proxy, `this` would refer to the event target 
    // use event.target to reference that element. 
    var element = event.target; 
    $(element).css("background-color", "red"); 

    // With proxy, `this` refers to the me object encapsulating 
    // this function. 
    $("#log").append("Hello " + this.type + "<br>"); 
    $("#test").unbind("click", this.test); 
    } 
}; 

var you = { 
    type: "person", 
    test: function(event) { 
    $("#log").append(this.type + " "); 
    } 
}; 

// execute you.test() in the context of the `you` object 
// no matter where it is called 
// i.e. the `this` keyword will refer to `you` 
var youClick = $.proxy(you.test, you); 


// attach click handlers to #test 
$("#test") 
    // this === "zombie"; handler unbound after first click 
    .click($.proxy(me.test, me)) 
    // this === "person" 
    .click(youClick) 
    // this === "zombie" 
    .click($.proxy(you.test, me)) 
    // this === "<button> element" 
    .click(you.test); 
</script>

來源

2012-04-27 10:17:27 Wolph

你的問題是範圍的一個 - 你的變量i沒有被綁定在範圍內，所以在事件處理程序被調用時它總是有最後一個賦值。

最簡單的方法來解決這個（當您使用jQuery）是使用eventData參數.click()：

('#linkID' + i).click({ param1: result.someObject[i] }, test);

，然後更改test讀取事件數據：

function test(ev) { 
    var param1 = ev.data.param1; 
    // ... 
}

jQuery將綁定任何提供的eventData並自動將其添加到傳遞給事件處理程序的事件對象。

這樣可避免必須創建任何附加閉包來修復提供的參數的範圍。

見題爲「通過事件數據」一節在http://api.jquery.com/bind/

來源

2012-04-27 10:19:12 Alnitak

JavaScript：如何在動態生成的jQuery .click（）函數中發送函數參數？

回答

相關問題