Thêm sự kiện onclick vào phần tử mới được thêm trong JavaScript

Tôi đã cố gắng thêm sự kiện onclick vào các phần tử mới mà tôi đã thêm bằng JavaScript.

Vấn đề là khi tôi kiểm tra document.body.innerHTML, tôi thực sự có thể thấy onclick = alert ('blah') được thêm vào phần tử mới.

Nhưng khi tôi nhấp vào phần tử đó, tôi không thấy hộp cảnh báo đang hoạt động. Trên thực tế, bất cứ thứ gì liên quan đến JavaScript đều không hoạt động ..

đây là những gì tôi sử dụng để thêm phần tử mới:

function add_img() { 
  var elemm = document.createElement('rvml:image'); 
  elemm.src = 'blah.png';
  elemm.className = 'rvml';
  elemm.onclick = "alert('blah')";
  document.body.appendChild(elemm);
  elemm.id = "gogo";
  elemm.style.position='absolute';
  elemm.style.width=55;
  elemm.style.height=55;
  elemm.style.top=200;
  elemm.style.left=300;
  elemm.style.rotation=200; 
}

Đây là cách tôi gọi hàm này:

<button onclick=add_img()>add image</button>

Bây giờ hình ảnh vẽ hoàn hảo bên trong trình duyệt. Nhưng khi tôi nhấp vào hình ảnh, tôi không nhận được cảnh báo đó.

.onclicknên được đặt thành một hàm thay vì một chuỗi. Thử

elemm.onclick = function() { alert('blah'); };

thay thế.

Không chắc chắn nhưng hãy thử:

elemm.addEventListener('click', function(){ alert('blah');}, false);

Bạn cũng có thể đặt thuộc tính:

elem.setAttribute("onclick","alert('blah');");

bạn không thể chỉ định một sự kiện theo chuỗi. Dùng nó:

elemm.onclick = function(){ alert('blah'); };

Câu trả lời ngắn gọn: bạn muốn đặt trình xử lý thành một hàm:

elemm.onclick = function() { alert('blah'); };

Câu trả lời dài hơn một chút: bạn sẽ phải viết thêm một vài dòng mã để mã đó hoạt động nhất quán trên các trình duyệt.

Thực tế là ngay cả đoạn mã dài hơn sắp xếp có thể giải quyết vấn đề cụ thể đó trên một tập hợp các trình duyệt phổ biến vẫn sẽ đi kèm với các vấn đề của riêng nó. Vì vậy, nếu bạn không quan tâm đến việc hỗ trợ nhiều trình duyệt, hãy chọn một cái hoàn toàn ngắn. Nếu bạn quan tâm đến nó và hoàn toàn chỉ muốn làm cho một thứ duy nhất này hoạt động, hãy kết hợp với addEventListenervà attachEvent. Nếu bạn muốn có thể tạo rộng rãi các đối tượng và thêm và xóa trình xử lý sự kiện trong toàn bộ mã của mình và muốn nó hoạt động trên các trình duyệt, bạn chắc chắn muốn ủy quyền trách nhiệm đó cho một thư viện như jQuery.

Tôi không nghĩ rằng bạn có thể làm điều đó theo cách này. Bạn nên sử dụng :

void addEventListener( 
  in DOMString type, 
  in EventListener listener, 
  in boolean useCapture 
); 

Tài liệu ngay tại đây .

Bạn có ba vấn đề khác nhau. Trước hết, các giá trị trong thẻ HTML nên được trích dẫn! Không làm điều này có thể gây nhầm lẫn cho trình duyệt và có thể gây ra một số rắc rối (mặc dù có thể không phải trường hợp ở đây). Thứ hai, bạn thực sự nên gán một hàm cho biến onclick, như người khác đã nói. Đây không chỉ là cách thích hợp để làm điều đó về sau mà còn khiến mọi thứ đơn giản hơn nhiều nếu bạn đang cố gắng sử dụng các biến cục bộ trong hàm onclick. Cuối cùng, bạn có thể thử addEventListener hoặc jQuery, jQuery có ưu điểm là giao diện đẹp hơn.

Ồ, và hãy đảm bảo HTML của bạn xác thực! Đó có thể là một vấn đề.

JQuery:

elemm.attr("onclick", "yourFunction(this)");

hoặc là:

elemm.attr("onclick", "alert('Hi!')");

không thể nói tại sao, nhưng cú pháp es5 / 6 không hoạt động

elem.onclick = (ev) => {console.log(this);} không làm việc

elem.onclick = function(ev) {console.log(this);} đang làm việc

Trong trường hợp bạn không muốn viết tất cả các đoạn mã mà bạn đã từng viết trong hàm mà bạn đã gọi. Vui lòng sử dụng mã sau, sử dụng jQuery:

$ (phần tử) .on ('click', function () {add_img ();});