Question

<body>
<script type="text/javascript">
$('#red').click(function(){
    $('#write').text('red');
});

</script>
<form id="formId" name="formName" method="post">
  <table>
    <tr>
      <td><div class="clickDiv red" id="red">mmmmmmm</div></td>
      <td><div class="clickDiv green"></div></td>
    </tr>
  </table>
  <div id="write"></div>
  <input type="radio" name="satir1" value="red" />
  <input type="radio" name="satir1" value="green" />
</form>
</body>

这不起作用。

<body>
<form id="formId" name="formName" method="post">
  <table>
    <tr>
      <td><div class="clickDiv red" id="red">mmmmmmm</div></td>
      <td><div class="clickDiv green"></div></td>
    </tr>
  </table>
  <div id="write"></div>
  <input type="radio" name="satir1" value="red" />
  <input type="radio" name="satir1" value="green" />
</form>

<script type="text/javascript">
$('#red').click(function(){
    $('#write').text('red');
});
</script>
</body>

这很有效。为什么？如何在标题中使用脚本部分？

Answer 1

在代码的第一个版本（不起作用）中，ID为＃red的元素在DOM中仍然不可用，因此jquery选择器找不到任何匹配元素。在第二个版本中，元素可用。

但是，作为一种好的做法，始终建议使用jquery ready函数来执行任何DOM准备就绪时需要运行的脚本。它采用以下格式：

$(<YOUR FUNCTION>);
OR
$(document).ready(<YOUR FUNCTION>));

Answer 2

您需要在jQuery document ready handler中包装第一个示例的javascript。这将导致代码等到页面元素在执行之前呈现到javascript DOM中。

<script type="text/javascript">
$(function() {
    $('#red').click(function(){
        $('#write').text('red');
    });
});
</script>

Answer 3

将.ready与您的第一个代码段一起使用：http://api.jquery.com/ready/

$(document).ready(function() {
    $('#red').click(function(){
        $('#write').text('red');
    });
});

在您的第一个示例中，执行脚本时#white尚不存在，因此您需要等到文档准备就绪。

Answer 4

jQuery在dom准备好之前启动。你总是应该在你的标题中包装jquery：

$(document).ready(function(){
    //Insert jQuery here
});

有关.ready()函数的更多信息：http://docs.jquery.com/Tutorials:Introducing_ $（文档）.ready（）

Answer 5

两者都是糟糕的选择。第一个不起作用，因为文档未在浏览器中完全构造。试试这个：

$(document).ready( function()
{
    $('#red').click(function()
    {
        $('#write').text('red');
    });
});

Answer 6

你应该使用html（）选项而不是文本选项

<script type="text/javascript">$(function() {
$('#red').click(function(){
    $('#write').html('red');
});});</script>

Answer 7

使用新的live jquery函数，并使用html放置内容;）

$('#red').live('click', function(){
  $('#write').html('red');
});

更多信息：http://api.jquery.com/live/

简单的jQuery问题

7 个答案: