Lỗi trong tạo thành phần của jQuery?

Question

$ (document) .ready (function() {var _new_li = $ ('', { 'id': 'p', 'text': 'CLICKME', nhấp chuột: function() {alert ('bắn'); },
dữ liệu: { 'somedata': 'somedata', }
});

_new_li.appendTo($("#example")); 
}); 

tôi nhận được một "lỗi chưa gặp: không thể đọc thuộc 'nhấp chuột 'của undefined ", khi tôi cố gắng bấm vào eleme nt mà tôi tạo ra như vậy. Nhưng, nếu bạn chuyển đổi nhấp chuột: và dữ liệu: nó hoạt động.

$(document).ready(function(){ 
    var _new_li  = $('<li/>',  { 
     'id':  'p', 
     'text': 'CLICKME', 
     data:  { 
      'somedata': 'somedata', 
     }, 
     click: function(){ 
      alert('fired'); 
     }      
    }); 

_new_li.appendTo($("#example")); 
}); 

bất kỳ lời giải thích nào cho hành vi đó?

Kind Regards

--Andy

PS:

tôi đăng một hành vi tương tự trước đó trong diễn đàn Phát triển cốt lõi jQuery, ông Swedberg trả lời có:

I'm pretty sure this is happening because you're setting data with an object, which >(until 1.4.2) would overwrite the event object. Not sure which version of jQuery you're >using in your project, but it looked like the jsbin example was using 1.4. Try upgrading >to 1.4.2 and see if that helps.

Nhưng có vẻ như vấn đề vẫn tồn tại trong 1.4.2

Answer 1

Bài viết được viết lại.

Bạn không nên đặt dấu phẩy đó sau phần tử cuối cùng (và duy nhất) trong dữ liệu.

Sau khi thử một số nội dung tôi đã này:

$(document).ready(function(){ 
    var fun=function(){ 
      alert('fired'); 
     }; 
    var parms={ 
     'id':  'p', 
     'text': 'CLICKME',  
     'click':fun,   
     'data':  { 
      'somedata': 'somedata' 
     } 
     }; 
     console.log(parms); 
    var _new_li = $('<li/>',parms); 

_new_li.appendTo($("#example")); 
}); 

Tất cả mọi thứ hoạt động tốt cho đến khi tôi bấm vào các yếu tố li. Sau đó, tôi nhận được e is undefined (jquery line 55). Hoạt động tốt khi nhấp chuột và dữ liệu được đổi chỗ.

Tuy tra

và thấy nó

jquery phiên bản phát triển, dòng 1919

var events = jQuery.data(this, "events"), handlers = events[ event.type ];

sự kiện là undefined.

jquery ghi đè các sự kiện được lưu trữ trong dữ liệu.

vì vậy đây là lỗi. Nó chỉ nên mở rộng.

Tôi đã gửi báo cáo lỗi.

Answer 2

Tôi đã kết thúc việc sửa đổi mã nguồn một chút, vì vậy nó sẽ không ngẫu nhiên phát nổ ở đây.

handle: function(event) { 
... 

// tbn modified source 
try { 
    var events = jQuery.data(this, "events"), handlers = events[ event.type ]; 
} catch(e) {} 
// tbn modified source 

..sau đó được rút ngắn lại nguồn

Tôi chưa gặp bất kỳ vấn đề nào với điều này kể từ (chưa).

Answer 3

Không chắc chắn điều này có hữu ích hay không, nhưng tôi đã gặp sự cố tương tự. Tôi đã cố gắng để ràng buộc các sự kiện như mouseout, click, vv ... vào một phần tử LI mới. Tôi đã nhận được lỗi 'Uncaught TypeError: Không thể đọc' mouseout 'thuộc tính' không xác định '. Hóa ra, bạn phải ràng buộc các sự kiện như click, mouseout, vv… SAU KHI bạn đã thêm phần tử vào DOM. Không phải trước đây. Thô dụ:

newLI = $('<li />'); 
$(document.body).append(newLI); // Correct 
newLI.click(...); 
newLI.mouseout(...); 

thay vì

newLI = $('<li />'); 
newLI.click(...); 
newLI.mouseout(...); 
$(document.body).append(newLI); // Incorrect 

Answer 4

folks .. đây không phải là lỗi .. những gì đang xảy ra là bạn cần phải sử dụng các tham số dữ liệu sự kiện

.click([ eventData ], handler(eventObject)) 

đồ eventDataA của dữ liệu sẽ được chuyển tới trình xử lý sự kiện.

để biết lý do cần thiết, bạn có thể xem lại thảo luận trong tài liệu jquery của .bind() .. bạn cũng có thể muốn xem lại khái niệm "đóng cửa" trong javascript .. nó cung cấp lý do đằng sau toàn bộ điều này

phần này là đặc biệt thích hợp (lấy từ http://api.jquery.com/bind/):

Đi qua tổ chức sự kiện dữ liệu

tham số eventData bắt buộc không được sử dụng phổ biến. Khi được cung cấp, đối số này cho phép chúng tôi chuyển thông tin bổ sung cho trình xử lý. Một cách sử dụng tiện lợi của tham số này là giải quyết các vấn đề do đóng cửa gây ra. Ví dụ, giả sử chúng ta có hai xử lý sự kiện mà cả hai tham khảo các biến bên ngoài giống nhau:

var message = 'Spoon!'; 
$('#foo').bind('click', function() { 
    alert(message); 
}); 
message = 'Not in the face!'; 
$('#bar').bind('click', function() { 
    alert(message); 
}); 

Bởi vì các trình xử lý đang đóng cửa mà cả hai đều có tin nhắn trong môi trường của họ, cả hai sẽ hiển thị thông điệp Không vào mặt! khi được kích hoạt. Giá trị của biến đã thay đổi. Để tránh điều này, chúng tôi có thể chuyển thư bằng cách sử dụng eventData:

var message = 'Spoon!'; 
$('#foo').bind('click', {msg: message}, function(event) { 
    alert(event.data.msg); 
}); 
message = 'Not in the face!'; 
$('#bar').bind('click', {msg: message}, function(event) { 
    alert(event.data.msg); 
}); 

Lần này biến không được chuyển trực tiếp trong bộ xử lý; thay vào đó, biến được truyền theo giá trị thông qua eventData, biến này sửa giá trị tại thời điểm sự kiện bị ràng buộc. Người xử lý đầu tiên sẽ hiển thị Spoon! trong khi người thứ hai sẽ cảnh báo Không có mặt!