Biến vượt qua Javascript trong href onclick yêu cầu

Question

Tôi biết đây thực sự là javascript cơ bản nhưng vì một số lý do, tôi dường như không thể nhận được chức năng onclick của liên kết của tôi để làm việc khi chuyển một tham số.

Tôi đã thử thoát dấu ngoặc kép, thêm các loại báo giá khác nhau và thêm biến thô dưới dạng chuỗi.

Tôi có nó làm việc với các bên dưới nhưng nó nói rằng "XYZ là undefined"

function renderLink(value, meta, record) 
     { 
      var type = record.data['name']; //value is XYZ 


      return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>'; 
     } 

function getReport(type){ 

    alert(type); 
} 

Answer 1

return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>'; 

Bạn cần phải thoát khỏi chuỗi:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>'; 

Answer 2

Nếu bạn nhìn vào mã HTML trả lại, bạn sẽ thấy vấn đề: gọi getReport của bạn trông như thế này:

getReport(XYZ); 

tôi đoán bạn muốn dấu ngoặc kép quanh đó, vì vậy:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>'; 

... mà Rend ERS:

getReport('XYZ'); 

Live example

Hơi nhiều bí truyền, nhưng khi bạn ra một thuộc tính onclick như một phần của mã nguồn HTML, nó là tất nhiên một thuộc tính HTML, có nghĩa là bạn có thể sử dụng các đối tượng nhân vật. Vì vậy, bạn thể sử dụng " thực thể:

return '<a href="javascript:void(0);" onclick="getReport(&quot;'+type+'&quot;); return false;"></a>'; 

Live example

tôi điểm này ra không phải vì tôi khuyên bạn nên nó (Tôi không), nhưng vì nó là hữu ích để nhớ những gì đang thực sự xảy ra trong một onclick thuộc tính. Đây là một trong những lý do tôi thực sự khuyên bạn nên sử dụng trình xử lý sự kiện thích hợp (ví dụ: thông qua addEventListener/attachEvent hoặc thậm chí chỉ gán cho thuộc tính của phần tử khi nó được khởi tạo) thay thế.

---

Điều quan trọng cần lưu ý là cách này để làm việc đó cũng rất nhạy cảm với các nội dung của record.data['name']. Ví dụ: hãy xem xét điều gì xảy ra nếu thay vì XYZ là Tom's. Kết quả của tùy chọn đầu tiên ở trên sẽ là

getReport('Tom's'); 

... rõ ràng là một vấn đề. Tương tự, nếu có dấu gạch chéo ngược trong văn bản, nó sẽ được coi là ký tự thoát trên kết quả, v.v.   — một chút của một bãi mìn.

Nếu bạn có thể thay đổi bạn renderLink để nó trả về một instantiated a yếu tố thực tế chứ không phải là một chuỗi, đó là những gì tôi muốn làm:

function createLink(value, meta, record) 
{ 
    var type = record.data['name'];   // Grab value as of when we were called 
    var link = document.createElement('a'); 

    link.href = "javascript:void(0);"; 
    link.onclick = function() {    // Or even better, addEventListener/attachEvent 
     getReport(type); 
     return false; 
    }; 

    return link; 
} 

Điều đó tạo ra sự liên kết và một đóng cửa rằng truy cập type mà không biến nó thành văn bản và ngược lại. (Đừng lo lắng nếu bạn không quen thuộc với đóng cửa, closures are not complicated.)

Live example

Answer 3

getReport nhận XYZ như là một biến không phải là một chuỗi, bạn cần phải đặt rằng dấu ngoặc kép bên trong:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';