HTML: onload cho các yếu tố phi cơ

cách thông thường của tôi thực hiện javascript biến trên rất nhiều yếu tố trong qua JQuery:HTML: onload cho các yếu tố phi cơ

<div class="cow"></div> 
<script> $(".cow").doStuff() </script>

Tuy nhiên, hoạt động này là mong manh và dễ gãy: nó hoạt động trên giả định rằng trang chỉ được tải một lần. Một khi bạn bắt đầu vào Ajax và tải lại một phần, kiểu biến đổi toàn cục này sẽ phá vỡ hoàn toàn. Nó cũng không hoạt động nếu máy chủ muốn thực hiện một biến đổi khác nhau cho mỗi phần tử dựa trên một số dữ liệu serverside.

Tôi biết sự kiện onload thực sự cho các yếu tố không phải body không hoạt động. Một giải pháp là cung cấp tất cả các yếu tố ID/lớp và tham khảo chúng ngay lập tức bằng cách sử dụng JQuery:

<div id="cow"></div> 
<script> $("#cow").doStuff() </script>

Tuy nhiên, điều đó thực sự lộn xộn; Tôi không thích nó chút nào, một phần vì mọi phần tử tôi đưa ra một ID làm ô nhiễm không gian tên toàn cầu của tôi. Tôi hiện đang cung cấp cho phần tử ID không hiệu quả một cách hiệu quả

<div id="id877gN0icYtxi"></div> 
<script> $("#id877gN0icYtxi").doStuff() </script>

dựa trên số cơ sở ngẫu nhiên64. Tuy nhiên, tất cả điều này có vẻ như là một hack khổng lồ: Tôi có thể cung cấp cho các phần tử onclick s và onmousedown s và như vậy rất đơn giản bằng cách sử dụng các thuộc tính tương ứng của chúng, sau đó gọi hàm để chuyển đổi this nhất định.

Bây giờ, tôi biết onload không hoạt động. Tuy nhiên, có cách nào để mô phỏng chức năng của nó không? Cụ thể, tôi muốn có thể chạy mã javascript tham chiếu đến một thẻ cụ thể bằng cách sử dụng this mà không phải chỉ định thẻ ID cho chúng.

EDIT: Về cơ bản tôi muốn một cái gì đó giống như

<input onclick="alert('moo')"/>

nhưng đối với onCreate; trường hợp sử dụng hiện tại của tôi là để lấp đầy một input hoặc textarea với văn bản, và tôi hiện đang thực hiện:

<input id="id877gN0icYtxi"/> 
<script>$("#id877gN0icYtxi").val(...)</script>

nơi ... là khác nhau cho mỗi hộp đầu vào, và do đó không thể được thực hiện dễ dàng bằng cách sử dụng "toàn cầu" jquery chuyển đổi . Mặt khác, tôi không thể chỉ đặt value hoặc thuộc tính của input khi tôi tạo nó vì nó có thể là textarea và tôi sẽ không biết. Tôi muốn làm một cái gì đó như:

<input onload="$(this).val(...)"/>

Điều gì không hiệu quả, nhưng tôi ước. Một lần nữa, ... được máy chủ đặt và khác nhau cho mỗi thẻ input trên trang.

EDIT2:

Tôi cũng nhận thức của giờ JQuery thường được sử dụng để làm toàn bộ tài liệu biến trên rất nhiều yếu tố trong cùng một cách. Vấn đề là trong trường hợp này, mỗi phần tử đang được chuyển đổi theo cách cụ thể cho phần tử đó, do máy chủ quyết định. Trường hợp sử dụng cụ thể là mỗi trường có nội dung của nó được điền trước bởi $().val() và mọi trường tự nhiên sẽ được lấp đầy với các nội dung khác nhau. Cung cấp cho mỗi thành phần ID duy nhất và sử dụng JQuery để thực hiện tìm kiếm toàn cầu để tìm lại yếu tố đó giống như một cách làm việc cực kỳ thú vị và tất nhiên sẽ bị phá vỡ khi bạn bắt đầu Ajaxing các phần của trang của bạn từ trong ra ngoài.

EDIT3:

Nói tóm lại, tôi muốn để có thể viết

<div onload="javascriptFunction(this)"/>

và đã javascriptFunction() được chạy trên khi <div> được tạo ra (cho dù đó là trên trang đầu tiên hoặc chèn qua ajax) và được thông qua <div> làm thông số. Chỉ cần onclick sẽ chạy javascriptFunction() với <div> làm thông số khi div được nhấp vào, tôi muốn điều tương tự xảy ra, nhưng khi <div> được tạo/chèn vào DOM.

Tôi sẵn sàng chấp nhận bất kỳ số lượng tập lệnh thiết lập nào trong số <head> để thực hiện điều này. Vì các lý do nêu trên, tôi không sẵn sàng thêm bất kỳ thẻ <script> nào sau <div> hoặc để thêm class hoặc id vào <div>. Với những giới hạn này, cách tốt nhất có thể thực hiện để mô phỏng thuộc tính onload cho các phần tử không phải là nội dung là gì?

Nguồn

2012-04-10 Li Haoyi

Không nhận được câu hỏi của bạn .. –

Làm thế nào, chính xác, bạn có ý định xác định thẻ bạn đang cố gắng giải quyết không? Có một số cách để dịch tiêu chí của bạn thành mã, nhưng để giúp bạn tìm ra mã, trước tiên chúng ta cần phải biết tiêu chí của bạn. – dragon

Công cụ này http://docs.jquery.com/Plugins/livequery tuyên bố thực hiện những gì bạn muốn: "Truy vấn trực tiếp cũng có khả năng kích hoạt một hàm (gọi lại) khi nó khớp với phần tử mới và hàm khác (gọi lại) cho khi một phần tử không còn khớp nữa. " Tôi đã không tự thử nghiệm nó. –

Không có onload sự kiện như vậy trong DOM spec, tuy nhiên DOM Level 2 đặc tả cung cấp Mutation event types, để cho phép thông báo về bất kỳ thay đổi cấu trúc của một tài liệu, bao gồm sửa đổi attr và văn bản, hiện tại chỉ có các trình duyệt hiện đại hỗ trợ các sự kiện như vậy và nó là lỗi trong Internet Explorer 9!

Tuy nhiên bạn có thể sử dụng DOMNodeInserted event giám sát các tài liệu cho bất kỳ sự thay đổi:

$(document).live("DOMNodeInserted", function(e){ 
    $(e.target).val(...); 
});

Bạn nên cẩn thận sử dụng đột biến sự kiện, ít nhất là cố gắng để được cập nhật! Theo W3C:

loại sự kiện đột biến chưa được hoàn toàn và interoperably thực hiện qua đại lý người dùng, Một đặc điểm kỹ thuật mới đang được phát triển với mục đích giải quyết các trường hợp sử dụng các sự kiện đột biến giải quyết, nhưng theo cách performant hơn .

Tôi đoán nếu bạn google vấn đề này, bạn có thể thấy một số plugin chéo duyệt/jquery cho điều này, chỉ trong trường hợp, những liên kết này migh giúp:

https://developer.mozilla.org/en/DOM/Mutation_events

http://help.dottoro.com/ljfvvdnm.php#additionalEvents

http://help.dottoro.com/ljmcxjla.php

http://help.dottoro.com/ljimhdto.php

http://www.bennadel.com/blog/1623-Ask-Ben-Detecting-When-DOM-Elements-Have-Been-Removed-With-jQuery.htm

Nguồn

2012-05-04 11:50:06

Cho các phần tử ID không "gây ô nhiễm không gian tên chung", nó chỉ là cơ chế để tham chiếu các phần tử. Bạn chỉ cần một ID cho một phần tử mà bạn dự định tham chiếu bằng ID. Việc cấp ID cho các yếu tố khác không có hại, chỉ cần không cần thiết.

Bạn có thể tham chiếu các phần tử theo một số tiêu chí, bao gồm cả lớp và vị trí của chúng trong DOM (bất kỳ phương thức nào trong nhóm bộ chọn CSS và cả các mối quan hệ DOM — cha mẹ, con, anh chị em, v.v.). Phương pháp bạn chọn có thể có những ưu điểm và nhược điểm tùy thuộc vào cách bạn đang sử dụng nó, không có cách "tốt" hay "tốt nhất" vốn có để làm điều đó, chỉ một số phương pháp sẽ phù hợp với một số trường hợp tốt hơn so với các phương pháp khác.

Nếu bạn muốn thay thế, giả sử, sau khi thay thế các phần tử trong DOM, khi đó bạn thay thế các phần tử cần tính đến điều đó. Sự kiện phái đoàn là một chiến lược, có những người khác.

Nguồn

2012-04-10 01:06:14 RobG

Đúng, tôi biết có sự cân bằng; Tôi đã nghĩ về chúng khá kỹ lưỡng =). Chuyển đổi tất cả phần tử của tôi-id-và-later-do-'$ (" # id "). Click (...)' để đơn giản sử dụng các thuộc tính 'onclick' của phần tử đã lưu cho tôi một vài tá dòng mã trong suốt chương trình và làm cho nó tấn rõ ràng hơn những gì đang diễn ra. Tôi muốn làm một cái gì đó tương tự cho tất cả các biến đổi jquery có nghĩa là để chạy khi phần tử được tạo ra. Nói cách khác, tôi không muốn mã của tôi thay thế các phần tử để thay thế tất cả người nghe nếu nó không thể được thực hiện tự động, bởi vì tôi sẽ thay thế tấn mã. –

Nếu bạn thêm người nghe vào đánh dấu, thì nhân bản phần tử sẽ giữ lại người nghe. Nếu bạn tự động thêm người nghe, không có tùy chọn nào khác ngoài việc thêm lại họ khi bạn thay thế phần tử hoặc sử dụng ủy quyền cho phụ huynh không được thay thế. – RobG

Đó là lý do tại sao tôi hỏi nếu có cách nào để thêm một người nghe 'onLoad' vào đánh dấu! Hoặc để đạt được điều tương tự bằng cách sử dụng một số JQuery thể dục dụng cụ một lần. Vấn đề với việc thêm chúng một lần nữa là tôi có rất nhiều thứ bị Ajax vào và ra, và khả năng xảy ra lỗi rất cao. Bây giờ, nó chắc chắn sẽ làm việc trong ngắn hạn, nhưng về lâu dài nó sẽ thêm vào spaghettiness tổng thể của cơ sở mã. –

Tất cả điều này phụ thuộc vào loại thẻ bạn muốn làm việc.

Một điều cần biết là jQuery cho phép bạn chọn nhiều mục cùng một lúc, vì vậy khi bạn làm một cái gì đó như $('p'), đối tượng đó đề cập đến tất cả các nút p.

Làm điều gì đó như $('p').hide() ẩn tất cả các nút p.

Bộ chọn jQuery là (ít nhất) mạnh mẽ như bộ chọn CSS, vì vậy bạn có thể thực hiện một số điều khá ngữ nghĩa trong các dòng đơn.

Hãy tưởng tượng nếu bạn có một cái gì đó giống như một danh sách các hộp trả lời cho một phần ý kiến hoặc một cái gì đó:

----------------------------------------- 
    Comment #1 
    blah blah blah blah blah 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #2 
    nyark nyark nyark nyark 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #3 
    ubadabuba 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #4 
    eeeeeeeeeeeeeeeeeeeeeeeeee? 
    [ Text field ] (Reply)

Vì vậy, bố trí DOM của bạn có thể trông giống như

<div class="comment" > 
    <h1> Comment #1 </h1> 
    <p> blah blah blah blah blah </p> 
    <input /> <button >Reply </button> 
</div> 
<div class="comment" > 
    <h1> Comment #2 </h1> 
    <p> nyark nyark nyark nyark </p> 
    <input /> <button >Reply </button> 
</div>

vì vậy nếu bạn muốn cập nhật tất cả các trường nhập của bạn, để đưa vào văn bản mặc định, bạn chỉ cần thấy rằng bộ chọn CSS cho các trường của bạn là .comment > input.

Sau đó JS xuất hiện tự

$(document).ready(function(){ 
    var inputs=$('.comment > input ');//references all the input fields defined by this selector 
    inputs.attr('value','default text');//set the value of the text in the input 
})

Example shown here

Nguồn

2012-04-10 02:30:40 rtpg

-1

Còn khoảng window.onload() thì sao?

Nguồn

2012-05-07 22:42:59

HTML: onload cho các yếu tố phi cơ

Trả lời

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