Tại sao tôi không thể sử dụng onClick để thực hiện một chức năng bên trong hàm jQuery $ (document) .ready?

Tôi mới sử dụng Javascript và jQuery. Tôi muốn bấm vào một nút và có một chức năng js thực hiện. (Đối với ví dụ này, nó chỉ là một cảnh báo, nhưng nó thực sự là một chức năng ajax.)

Cảnh báo đầu tiên xuất hiện, nhưng sau khi tôi nhấp vào nút, tôi không bao giờ thấy cảnh báo thứ hai ("đã làm"). Có vẻ như javascript không nghĩ rằng hàm doIt() được định nghĩa khi nút được nhấp.

Dưới đây là các mã có liên quan:

$(document).ready(function() 
{ 
    alert('ready'); 

    function doIt() { 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

Nguồn

2010-07-30 jalperin

Đó là vì chức năng đó không phải là trong bối cảnh toàn cầu, đó là nơi bạn onclick="" đang tìm kiếm. Bạn cần phải di chuyển nó bên ngoài của bạn document.ready (vì vậy nó không scoped riêng cho đóng cửa đó), hoặc (một cách tiếp cận tốt hơn IMO) ràng buộc nó bên trong document.ready, đây là những gì tôi có nghĩa là bởi mỗi:

Ràng buộc nó bên (loại bỏ onclick="" của bạn cho việc này):

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(doIt); 
    function doIt() { 
    alert('did it'); 
    } 
});

hoặc phiên bản ẩn danh (một lần nữa loại bỏ của bạn onclick=""):

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(function() { 
    alert('did it'); 
    }); 
});

Hoặc di chuyển nó ra ngoài (giữ bạn onclick=""):

$(document).ready(function() { 
    alert('ready'); 
}); 
function doIt() { 
    alert('did it'); 
}

Nguồn

2010-07-30 13:03:44

hoặc giữ nó bên trong, nhưng tuyên bố nó như là một chức năng toàn cầu (giữ onclick của bạn) – Konerak

Tôi thực sự làm cả hai, tùy thuộc vào hoàn cảnh. Ví dụ, tôi sử dụng các tệp .ascx với Javascript kèm theo và khi tôi làm như vậy, việc đặt hàm bên trong giới hạn phạm vi của hàm, nhưng lần khác tôi muốn hàm toàn cục mà tôi gọi từ nhiều hàm bao gồm - trong trường hợp đó, Tôi di chuyển hàm bên ngoài phạm vi. Vì vậy, cả hai tùy chọn này đều có sử dụng. –

Những gì bạn cần làm là gắn một "click" sự kiện để nó sử dụng jquery như thế này.

jQuery(document).ready(function($) { 

    $('#my_button').click(function() { 

     alert('i was clicked'); 

    }); 
}); 

<input type="button" id="my_button" value="Go" />

Đây là một bản demo jsfiddle sống dành cho bạn: http://jsfiddle.net/8A5PR/

Đây là trang hướng dẫn cho bạn: http://api.jquery.com/click/

Nguồn

2010-07-30 13:03:42

Không, onClick là chính xác. – Konerak

@Konerak Tôi nghĩ rằng bạn bỏ lỡ điểm, điều này cho phép bạn trích xuất quản lý sự kiện onclick từ thẻ và đặt nó vào javascript bằng hàm, do đó bạn quản lý mã (hành vi) tách biệt với đánh dấu của mình trong khi chức năng thực thi vẫn còn tương tự - để xử lý sự kiện nhấp của phần tử trên trang của bạn. –

@Mark - Tôi không nghĩ @Konerak đã bỏ lỡ điểm nào cả. Câu trả lời này nói rằng bạn * "cần phải liên kết một sự kiện nhấp chuột với chúng tôi bằng cách sử dụng jquery" *. Đó là không đúng. Sự kiện ràng buộc với jQuery là một tùy chọn, nhưng bạn không cần phải làm điều đó. – user113716

Bạn xác định DoIT trong document.ready của bạn như một tuyên bố chức năng.

Hoặc bạn nên sử dụng một biểu hiện chức năng hoặc khai báo hàm ra khỏi chức năng sẵn sàng.

$(document).ready(function() 
{ 
    alert('ready'); 

    doIt = function() { //now has global scope. 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

(vâng, onClick là không thực sự là cách jQuery làm việc đó và có lẽ nên được thay thế bởi một handler nhấp chuột được định nghĩa trong chức năng sẵn sàng, nhưng nó công trình và được phép.

Nguồn

2010-07-30 13:04:17 Konerak

bạn có chắc chắn rằng nó hoạt động không? 'doIt' vẫn được khai báo trong phạm vi cục bộ. – fearofawhackplanet

Nếu tôi đặt 'var doIt', bạn đã đúng. Bỏ qua 'var' khai báo biến toàn cục. – Konerak

+1 sau đó để dạy tôi một cái gì đó mới sau đó. Đó có phải là một tính năng jQuery hoặc có thể áp dụng cho JavaScript chung không? – fearofawhackplanet

gì bạn đang làm ngay bây giờ chỉ đơn giản là đặt một hàm doIt() bên trong một sự kiện window.onload (cho tất cả các mục đích và sự kiện) .Chức năng này sẽ không bao giờ được gọi bên ngoài tài liệu.đã trừ khi bạn liên kết nó với một phần tử bởi vì nó bị kẹt bên trong

Bạn cần phải di chuyển fu của bạn nction bên ngoài của document.ready để nó có thể được gọi bởi các sự kiện bên ngoài.

Chỉ cần một liên kết nhỏ để tham khảo: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Nguồn

2010-07-30 13:06:15

Từ tài liệu: "Với $ (tài liệu) .ready(), bạn có thể nhận các sự kiện của bạn để tải hoặc kích hoạt hoặc bất cứ điều gì bạn muốn họ làm trước khi tải cửa sổ. " http://docs.jquery.com/Tutorials:Introducing_$ (tài liệu) .ready() –

Ồ, tôi đã phạm sai lầm rồi, tôi đoán nó TRƯỚC KHI window.onload. –

Không thực sự là một sai lầm chỉ cần hiểu :) một cách khác để nhà nước này là "khi DOM đã sẵn sàng", do đó, trang có thể không được trả lại 100%, nhưng DOM (Document Object Model) đã sẵn sàng. –

Hãy thử này ...

$(document).ready(function() { 


    alert('ready'); 


     $("#Go").submit(function(event) { 
      alert('did it'); 
     }); 

}); 

<input name="Go" id="Go" type="button" value="Go" />

Nguồn

2010-07-30 13:06:21

Có thể là tôi đến trễ để đăng câu trả lời câu trả lời coz đã được đăng .. Không phải lo lắng :) –

Javascript có hai loại phạm vi, mức toàn cầu và chức năng. Nếu bạn khai báo doIt bên trong một hàm, nó sẽ không hiển thị bên ngoài hàm. Có một vài cách để giải quyết nó

//just declare the function outside the ready function 
$(function() { 
}); 
function doIt() { alert('did it'); } 

//decare a variable outside the function 
var doIt; 
$(function() { 
    doIt = function() { alert('did it'); } 
}); 

// if you dont use var, variables are global 
$(function() { 
    doIt = function() { alert('did it'); } 
})

Nguồn

2010-07-30 13:07:15

$(document).ready(function() 
{ 
});

là một xử lý sự kiện cho document.ready, các chức năng bên trong xử lý mà trong phạm vi đó.

Phương pháp tốt hơn là chèn trình xử lý cho sự kiện nhấp chuột của bạn bên trong, sau đó gọi hàm đó ở đó.

$(document).ready(function() 
{ 
    alert('ready'); 

    $('body input').click(function(){ 
    doIt(); 
    }); 
    function doIt() { 
     alert('did it'); 
    }; 
});

C ALNG C hasNG này có tác dụng phụ của việc xóa mã khỏi đánh dấu (một điều tốt) để bạn có thể loại bỏ mã đó khỏi thẻ nhập của mình.

Nguồn

2010-07-30 13:07:35

Có, như được đề cập bởi những người khác, bạn thực sự cần phải di chuyển hàm bên ngoài khai báo sẵn sàng jquery. Cũng xin lưu ý rằng javascript phân biệt chữ hoa chữ thường, do đó bạn nên sử dụng onClick thay vì onclick. Trân trọng

Nguồn

2010-07-30 13:08:15 Muleskinner

Thực ra, nó không phải là javascript. Nó là một thuộc tính HTML. 'onclick' sẽ hoạt động tốt, như' oNcLiCk'. – user113716

Tại sao tôi không thể sử dụng onClick để thực hiện một chức năng bên trong hàm jQuery $ (document) .ready?

Trả lời

Các vấn đề liên quan