Question

我是JS的新手。我已经完成了两个简单的函数来更改输入按钮的值和onclick-event。

function doAjaxRequest(url, divID, buttonID) {
  $(divID).html('<img src="images/loader.gif" />');
  setTimeout(function(){ $(divID).load(url); }, 600);
  setTimeout(function(){ $(buttonID).attr({
      value: 'Schliessen',
      onClick: 'clear_div(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });}, 600);
};

function clear_div(url, divID, buttonID) {
    $(divID).empty();
    $(buttonID).attr({
      value: 'Mehr...',
      onClick: 'doAjaxRequest(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });
};

函数调用是

<div id="div1"></div>
<input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>

我在我的主页上使用的doctype是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这些功能在IE中都能正常工作，但在FF中它们只有在我将doctype设置为

时才有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

我也尝试了“loose.dtd”而没有效果。

我在使用JS做错了什么？希望有人可以帮助我。

电贺乔

Answer 1

问题可能是onClick应该是onclick（案例在XHTML中的属性中很重要）。但是有一些问题。

在你的标记中：
```
<input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>
```
您没有在div1或button1周围添加引号，这意味着您依赖于浏览器在全局命名空间中转储这些符号，因为它们是您元素的ID。这是相当普遍的（IE和其他一些人这样做），但它并不普遍。相反，我会传递字符串然后正确查找它们。

由于您使用的是jQuery，因此没有理由（以及有几个原因不使用）onclick属性。

所以：

function doAjaxRequest(url, divID, buttonID) {
  $('#' + divID).html('<img src="images/loader.gif" />');
  setTimeout(function(){
    $('#' + divID).load(url);
  }, 600);
  setTimeout(function(){
    $('#' + buttonID)
      .attr({value: 'Schliessen'})
      .click(function() {
        clear_div(url, divID, buttonID);
    });
  }, 600);
}

function clear_div(url, divID, buttonID) {
    $('#' + divID).empty();
    $('#' + buttonID)
      .attr({value: 'Mehr...'})
      .unbind('click')
      .click(function() {
        doAjaxRequest(url, divID, buttonID);
      });
}

同样，你的按钮连接最初应该是：

$("#button1").click(function() {
  doAjaxRequest('test.html', 'div1', 'button1');
});

...而不是在HTML中使用onclick。该代码需要在 HTML中的按钮之后显示（建议在文档的底部放置script标记，这在结束之前{相当常见{ {1}} tag），或者你可以将它包装在jQuery </body>处理程序中：

ready

...所以它只在DOM加载时运行。

注意：

现在我们正在为事件处理程序使用真正的函数，并以现代方式将它们连接起来。

我们使用的是元素的ID，而不是它们的全局实例（不完全可靠）。

我们正在使用jQuery(function($) { $("#button1").click(function() { doAjaxRequest('test.html', 'div1', 'button1'); }); });删除所有以前的unbind处理程序，然后再添加新处理程序。

函数声明后不需要分号。分号终止语句。函数声明不是语句（它们是声明）。也就是说，在那里加一个分号是无害的。： - ）

最后：我认为我可能只是让点击处理程序根据某些标志更改其行为，而不是删除旧的click处理程序并添加新的处理程序。

Answer 2

我不确定这是否是你问题的原因，但你的doAjaxRequest参数对我来说看起来很有趣，方法如下：我不确定所有浏览器都将一个元素暴露为以id命名的全局变量元素。如果您这样做，我会更确定您的代码是否正确：

onClick="doAjaxRequest('test.html', '#div1', '#button1');"

JS在FF中工作但在IE中不工作

2 个答案: