jQuery：當綁定/點擊事件是針對類的引用對象（this）

Question

感謝您閱讀本文。

我正在動態生成一些數據，其中包括一個帶有文本框旁邊的選擇下拉列表。如果用戶單擊選擇，我動態填充它（代碼如下）。我有一個類的選擇，我希望下面的代碼將工作。我在選擇上使用ID進行了測試，並將ID放在ID上我已經正常工作。但是，將代碼更改爲引用類（因爲會有多個數據組，其中包括一個帶有文本框的選擇）並且$(this)，我無法使其工作。任何想法都會有所幫助。由於

旁邊選中文本框的相關性是代碼的第二部分...當選項中選擇

.one選擇更新文本框所以選擇只更新一次，那麼.bind允許選擇的任何選項放置在相鄰的文本框中。

$('.classSelect').one("click", 
function() { 
    $.ajax({ 
    type: "post", 
    url: myURL , 
    dataType: "text", 
    data: { 
    '_service' : myService, 
    '_program' : myProgram , 
    'param' : myParams 
    }, 
    success: 
    function(request) { 
    $(this).html(request); // populate select box 
    } // End success 
    }); // End ajax method 

    $(this).bind("click", 
    function() { 
    $(this).next().val($(this).val()); 
    }); // End BIND 
}); // End One 

<select id="mySelect" class="classSelect"></select> 
<input type="text"> 

Answer 1

$(this)只是功能的範圍內，有關你需要匹配多個元素。雖然功能之外，它失去的是參考：

$('.classSelect').one("click", function() { 
    $(this); // refers to $('.classSelect') 

    $.ajax({ 
    // content 
     $(this); // does not refer to $('.classSelect') 
    }); 
}); 

更好的方式來處理這個問題可能是：順便說

$('.classSelect').one("click", function() { 
    var e = $(this); 

    $.ajax({ 
    ... 
     success : function(request) { 
      e.html(request); 
     } 
    }); // end ajax 

    $(this).bind('click', function() { 
    // bind stuff 

    }); // end bind 

}); // end one 

，你熟悉的load()方法？我覺得更容易基本阿賈克斯（因爲它作用於纏集，取而代之的則是像$.ajax()一個獨立的功能這裏我將如何使用load()改寫這個：

$('.classSelect').one('click', function() { 
    var options = { 
     type : 'post', 
     dataType : 'text', 
     data : { 
     '_service' : myService, 
     '_program' : myProgram , 
     'param' : myParams 
     }   
    } // end options 

    // load() will automatically load your .classSelect with the results 
    $(this).load(myUrl, options); 


    $(this).click(function() { 
    // etc... 

    }); // end click 

}); // end one 

Answer 2

這是匹配一個選擇。所以你要

$("select[class='classSelect']") ... 

Answer 3

我認爲，這是因爲該功能附加到成功事件並不知道'this'是什麼，因爲它獨立於你所稱的對象而運行（我沒有很好地解釋它，但我認爲它是關閉的。）

我認爲如果您在$ .ajax調用之前添加以下行：

var _this = this; 

，然後在成功函數中使用變量：

success: 
    function(request) { 
    _this.html(request); // populate select box 
    } 

它可以很好地工作

Answer 4

成功（）函數不知道這一點，因爲其他任何事件回調（它們是外運行對象範圍）。

您需要關閉該變量的成功函數的範圍，但你真正需要的不是「本」，但$（本）

所以：

var that = $(this); 
... some code ... 
success: function(request) { 
    that.html(request) 
} 

Answer 5

感謝歐文。雖然可能有更好的編寫代碼（與鏈接）....我的代碼問題是$（this）在.ajax和.bind調用中不可用。因此將它存儲在var中並使用該var是解決方案。

再次感謝。

$('.classSelect').one("click", 
function() { 
    var e = $(this) ; 

    $.ajax({ 
    type: "post", 
    url: myURL , 
    dataType: "text", 
    data: { 
    '_service' : myService, 
    '_program' : myProgram , 
    'param' : myParams 
    }, 
    success: 
    function(request) { 
    $(e).html(request); // populate select box 
    } // End success 
    }); // End ajax method 

    $(e).one("click", 
    function() { 
    $(e).next().val($(e).val()); 
    }); // End BIND 
}); // End One