javascript - Jquery:如何在加载时禁用图像的点击功能？

Question

这将无法使用:

$('div#menuBar,#goLeftBtn,#goRightBtn').attr('disabled', true);

在document.ready中

有什么想法吗？ 谢谢!

编辑:
我的 html 基本上是这样的:

  <div id="floatRight">
       <img src="./images/all_left.png" id="goAllLeft" class="arrow" />
       <img src="./images/left.png" id="goLeft" class="arrow" />
       <img src="./images/right.png" id="goRight" class="arrow"/>
       <img src="./images/all_right.png" id="goAllRight" class="arrow" />
    </div>

我知道这些不是上面 jquery 代码中的确切图像名称，但我的所有 img 基本上都是这样设置的，对于该特定代码行，我只需要禁用这些 img。

Answer 1

与其尝试在加载时禁用，不如在加载文档之前不绑定(bind)点击事件？

如果这些都是没有被 anchor 标签包裹的图片，你可以很容易地做到这一点。

<img id="menuBar" />
<img id="goLeftBtn" />
<img id="goRightBtn" />

目前没有绑定(bind)点击事件，所以真的没有什么可以禁用的

<script type="text/javascript">
    $(function(){
        $("#goLeftBtn").click(function() { /* go left */ });
        $("#goRightBtn").click(function() { /* go right */ });
        $("#menuBar").click(function() { /* go menu? */ });
    });
</script>

如果您将这些包装在 anchor 标记中，您将无法调用 e.preventDefault 来阻止点击事件的发生，因为页面未完成加载并且 jQuery 事件是不绑定(bind)。

---

如果您像这样内嵌点击事件(这可能不是一个好主意):

<img id="menuBar" onclick="return DoMenuStuff();" />
<img id="goLeftBtn" onclick="return GoLeft();" />
<img id="goRightBtn" onclick="return GoRight();" />

你总是可以这样做:

<script type="text/javascript">
    var loaded = false;
    $(function(){
        loaded = true; // page done loading
    });

    function DoMenuStuff()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoLeft()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoRight()
    {
        if(loaded) { /* do stuff */ }
    }
</script>