6

我通过 JQuery 对许多元素执行 javascript 转换的常规方式：

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

然而，这个操作是脆弱和脆弱的：它是在页面全部只加载一次的假设下工作的。一旦您开始使用 Ajax 并进行部分重新加载，这种全局转换就会完全失效。如果服务器想要基于某些服务器端数据对每个元素进行不同的转换，它也不起作用。

我知道非元素的实际onload事件body不起作用。一种解决方案是提供所有元素 ID/类并使用 JQuery 立即引用它们：

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

但是，这真的很混乱。我根本不喜欢它，部分原因是我给一个 ID 的每个元素都会污染全局 I 命名空间。我目前正在给元素一个有效的不可碰撞的 ID

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

基于随机的 base64 数字。然而，这一切看起来像是一个巨大的黑客：我可以非常简单地使用它们各自的属性给元素onclicks 和onmousedowns 等，然后调用一个函数来转换给定的this.

现在，我知道onload这行不通。但是，有没有办法模拟它的功能？具体来说，我希望能够运行引用特定标签的 javascript 代码，this而无需为标签分配 ID。

编辑：本质上我想要类似的东西

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

但是对于oncreate；我目前的用例是用文本填充input或textarea，我目前正在做：

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

其中...每个输入框都不同，因此无法使用“全局”jquery 转换轻松完成。另一方面，我不能只在创建它时设置valueor 属性input，因为它可能是 a textarea，我不知道。我想做类似的事情：

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

这不起作用，但我希望它起作用。同样，这...是由服务器设置的，并且对于页面上的每个input标签都不同。

编辑2：

我很清楚 JQuery 通常用于以相同方式对许多元素进行整个文档转换。问题在于，在这种情况下，每个元素都以特定于该元素的方式进行转换，由服务器决定。具体用例是每个字段的内容都用 预填充$().val()，自然每个字段都会填充不同的内容。给每个元素一个唯一的ID 并使用 JQuery 进行全局搜索以再次找到该元素似乎是一种非常迂回的做事方式，当您开始进出页面的 Ajaxing 部分时当然会中断。

编辑3：

简而言之，我希望能够写作

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

并javascriptFunction()在创建时运行<div>（无论是在初始页面上还是通过 ajax 插入）并<div>作为参数传递。就像单击 div时作为参数onclick运行一样，我希望发生同样的事情，但是当它被创建/插入到 DOM 中时。javascriptFunction()<div><div>

<head>为了实现这一点，我愿意接受任何数量的设置脚本。由于上面提到的原因，我不愿意在,<script>之后添加任何标签<div>，class或者id在<div>. 鉴于这些限制，模拟onload非主体元素的属性最好的方法是什么？

4

4 回答 4

10

DOM 规范中没有这样的onload事件，但是 DOM Level 2 规范提供了Mutation 事件类型，以允许通知文档结构的任何更改，包括 attr 和文本修改，目前只有现代浏览器支持此类事件，并且它在 Internet 上是错误的探险者九号！

但是，您可以使用它DOMNodeInserted event来监视文档的任何更改：

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

您应该小心使用 Mutation 事件，至少尝试更新！根据 W3C：

突变事件类型尚未在用户代理之间完全且可互操作地实现，新规范正在开发中，旨在解决突变事件解决的用例，但以更高性能的方式。

我想如果你用谷歌搜索此事，你可能会为此找到一些跨浏览器/jquery 插件，以防万一，这些链接可能会有所帮助：

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

于 2012-05-04T11:50:06.983 回答
1

所有这些都取决于您要使用哪种标签。

要知道的一件事是，jQuery 允许您一次选择很多项目，因此当您执行类似 的操作时$('p')，该对象指的是所有节点p。

做类似$('p').hide()隐藏所有p节点的事情。

jQuery 选择器（至少）和 CSS 选择器一样强大，所以你可以在单行中做一些非常语义化的事情。

想象一下，如果您有类似评论部分的回复框列表之类的东西：

 -----------------------------------------
  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)

所以你的 DOM 布局可能看起来像

<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>

因此，如果您想更新所有输入字段，输入默认文本，您只需要查看字段的 CSS 选择器是.comment > input.

之后JS自行出现

$(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
})​

此处显示的示例

于 2012-04-10T02:30:40.717 回答
0

给元素一个 ID 不会“污染全局命名空间”，它只是一种引用元素的机制。您只需要一个您打算通过 ID 引用的元素的 ID。为其他元素提供 ID 没有害处，只是没有必要。

您可以通过多种标准引用元素，包括类及其在 DOM 中的位置（CSS 选择器池中的任何方法以及 DOM 关系——父、子、兄弟等）。您选择的方法可能有优点和缺点，具体取决于您使用它的方式，没有固有的“好”或“最佳”方法，只是有些方法比其他方法更适合某些情况。

如果你想在替换 DOM 中的元素之后替换监听器，那么你的替换元素需要考虑到这一点。事件委托是一种策略，还有其他策略。

于 2012-04-10T01:06:14.807 回答
-1

怎么样window.onload()？

于 2012-05-07T22:42:59.603 回答