2010-09-03 28 views
9

Tôi đang cố chỉnh sửa sự kiện 'trao đổi' của phần tử 'chọn' hiện có.Làm cách nào để chỉnh sửa thuộc tính 'onchange' trong thẻ 'chọn'? (sử dụng jquery)

Đối với mục đích ví dụ tôi có đoạn mã sau:

<select id="sel_id" onchange="javascript:foo();" > 

và bất cứ khi nào tôi cố gắng thay đổi nó 'onchange' thuộc tính tôi đang sử dụng như sau:

$("#sel_id").attr("onchange", "foo_2()"); 

FYI, mã này mà nên được tốt không hoạt động, thuộc tính 'onchange' vẫn không thay đổi. Vậy bạn nên chỉnh sửa nó như thế nào?

AMMENDMENT:

Bạn có thể loại bỏ các thuộc tính và sau đó gắn một chức năng khác nhau như:

$("#sel_id").removeAttr("onchange").bind("change", function(){ foo_2(); }); 

nhưng vấn đề này vẫn còn, là nó có thể thay đổi 'onchange' thuộc tính mà không cần loại bỏ nó ở nơi đầu tiên?

Trả lời

17

Không phải là câu trả lời chính xác cho câu hỏi, nhưng tôi có thể loại bỏ sự kiện này sử dụng này:

document.getElementById('sel_id').onchange = undefined; 

(như đã thấy ở How to Clear/Remove JavaScript Event Handler?)

và sau đó đi với điều này:

$('#sel_id').change(function() { foo_2(); }); 
+0

Vâng, đó là câu trả lời đúng, tôi chắc chắn cần phải loại bỏ sự kiện này và ràng buộc riêng của tôi sử dụng jquery. – vitorhsb

+1

'$ ('sel_id'). Attr ('onchange', undefined) .change (function() {foo_2();});' là cách jQuery để làm điều đó. Bằng cách này bạn có thể thực hiện cả hai thao tác với một đối tượng jQuery. – Muhd

+1

OP cũng có thể chỉ làm '.change (foo_2)' thay vì gói trong một hàm ẩn danh. – Muhd

3

Làm việc cho tôi nếu tôi sử dụng số gốc setAttribute().

Ngoài ra, hãy nhớ rằng bạn cần báo giá xung quanh công cụ chọn.

$("#sel_id")[0].setAttribute("onchange", "foo_2()"); 

Cũng nên nhớ để xác định foo_2 trong không gian tên toàn cầu, chứ không phải bên trong .ready() chức năng của jQuery.

+0

Bạn nói đúng, tôi đã quên các trích dẫn trong ví dụ nhưng đã được sử dụng trong mã thực. (chỉnh sửa câu hỏi) 'setAttribute()' nên là giải pháp cho câu hỏi, nhưng nó thực sự có cùng một vấn đề tôi đã trình bày. Nếu thuộc tính 'onchange' được khai báo trong phần tử thì nó không được thay thế và mã sự kiện cũ được kích hoạt. Hơn nữa, tôi muốn sử dụng chức năng phạm vi bên trong trong sự kiện trao đổi. Vì vậy, tôi thực sự có thể sử dụng mã tôi tham chiếu trong phần bổ sung. – vitorhsb

+0

@vitorhsb - Từ sự bổ sung của bạn cho câu hỏi của bạn, vấn đề còn lại của 'foo()' đang được gọi. Đây có phải là trong IE? Bạn có thể thử thiết lập thuộc tính 'onchange' thành null:' $ ("# sel_id") [0] .onchange = null; '. Không chắc chắn nếu điều đó sẽ giúp đỡ, nhưng có lẽ đáng để thử. – user113716

+0

Điều này thật tuyệt! Dường như có lỗi trong IE8 liên quan đến việc ràng buộc sự kiện thay đổi thành một lựa chọn. Tôi đã thử gần như tất cả mọi thứ (addEventListener, và jQuery .change và .bind. Không làm việc. Nhưng, điều này đã làm. Cảm ơn! –

2

Sử dụng chức năng thay đổi JQuery.

 
$('#sel_id').change(function() { 
    //your code 
}); 
+0

Bằng cách này nó vẫn kích hoạt sự kiện onchange được khai báo trong thẻ chọn – vitorhsb

+0

Sau đó sử dụng $ ('# sel_id'). ') đầu tiên – jcubic

+1

'$ (' # sel_id '). unbind (' change ')' thực sự không loại bỏ sự kiện trước đó được khai báo trong thẻ html, nó chỉ loại bỏ các sự kiện ràng buộc khai báo dinamically. – vitorhsb

0

Đây là một cách để làm điều đó chỉ sử dụng javascript:

<html> 
<head> 
<script type = "text/javascript" langauge="JavaScript"> 
function foo(){ 
    alert("foo"); 
} 
function fi() { 
    alert('fi'); 
} 
</script> 
</head> 
<body> 
<select id = "select_list" onchange="foo();"> 
<option value = "1">1</option> 
<option value = "2">2</option> 
</select> 
<input type = "button" value = "change" onclick = "document.getElementById('select_list').onchange = fi;"> 
</body> 
</html> 
Các vấn đề liên quan