Question

我执行javascript的正常方式是通过jQuery转换很多元素：

<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数字。然而，这一切似乎都是一个巨大的黑客攻击：我可以使用各自的属性非常简单地给出元素onclick和onmousedown s，然后调用函数来转换给定的{{1} }。

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

编辑：基本上我想要像

这样的东西

this

但是对于oncreate;我目前的使用案例是用<input onclick="alert('moo')"/>或input填写文字，我目前正在这样做：

textarea

其中<input id="id877gN0icYtxi"/> <script>$("#id877gN0icYtxi").val(...)</script>对于每个输入框都不同，因此无法使用“全局”jquery变换轻松完成。另一方面，我创建它时不能只设置...或value的属性，因为它可能是input，我不知道。我想做点什么：

textarea

哪个不起作用，但我希望如此。同样，<input onload="$(this).val(...)"/>由服务器设置，并且与页面上的每个...标记不同。

EDIT2：

我很清楚小时JQuery通常用于以相同的方式对许多元素进行整个文档转换。问题在于，在这种情况下，每个元素都以特定于该元素的方式进行转换，由服务器指定。具体的用例是每个字段的内容都由input预先填写，当然每个字段都会填充不同的内容。为每个元素提供一个唯一的 ID，并使用JQuery进行全局搜索以再次找到该元素，这似乎是一种令人难以置信的迂回做事方式，当然，当你开始Ajaxing部分页面时会中断进行。

EDIT3：

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

$().val()

并在创建<div onload="javascriptFunction(this)"/>时运行javascriptFunction()（无论是在初始页面上还是通过ajax插入），并将<div>作为参数传递。正如<div>在点击div时将onclick作为参数运行javascriptFunction()一样，我希望同样的事情发生，但是当创建/插入<div>时DOM。

我愿意接受<div>中的任意数量的设置脚本，以实现这一目标。由于上述原因，我不希望在<head>之后添加任何<script>代码，或者向<div>添加class或id。鉴于这些限制，为非身体元素模拟<div>属性可以做的最好的事情是什么？

Answer 1

DOM规范中没有此类onload事件，但DOM Level 2规范提供Mutation event types，以允许通知文档结构的任何更改，包括attr和文本修改，目前只有现代版本浏览器支持此类事件，并且在Internet Explorer 9中存在错误！

但是，您可以使用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

Answer 2

所有这些取决于您想要使用的标签类型。

要知道的是，jQuery允许您一次选择很多项目，因此当您执行$('p')之类的操作时，该对象会引用 all 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
})

Example shown here

Answer 3

为元素提供ID不会“污染全局命名空间”，它只是一种引用元素的机制。您只需要要按ID引用的元素的ID。将ID提供给其他元素并不是有害的，只是不必要。

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

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

Answer 4

window.onload()怎么样？

HTML：非身体元素的onload

4 个答案: