Question

我的php文件上有一个链接，当它附加一个事件监听器并点击同一页面上的另一个链接时。

 <p>Upload the image you want on your cake:<a href="#" id="upload-button" class="button">Upload</a> </p>

<a href="#openModal" id="upload-link"></a>
<div id="openModal" class="modalDialog">
    <div><a href="#close" title="Close" class="close">X</a>
        <?php require 'image-upload.php'; ?>
    </div>
</div>

    <script>
        $('#upload-button').on('click', function () {//This works fine
            $('#upload-link')[0].click(); //This doesn't work.
        });`

    </script>

现在点击事件应点击上传链接，然后会弹出一个模式。但是，没有任何反应。原因和解决方案可能是什么？

Answer 1

通过添加

将jQuery添加到HTML中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

在自定义脚本之前。

除了现在，你的div总会出现。你应该设置一种隐藏/显示它的动态方式。您可以在元素上使用jQuery hide（）和show（）方法，如

$("#close").click(function(e){
    $("#openModal").hide();
});

您的标识符语法也应始终相同。所有的camelCase或所有i-dont-know-how-this-case-is-called。

Answer 2

我不知道为什么它之前没有用，但是当我对上传按钮链接进行了一些更改时。一切正常，模态弹出就好了。

<p>Upload the image you want on your cake:<a href="javascript: void(0)" id="upload-button" class="button">Upload</a> </p>

我刚刚将href从#更改为javascript: void(0)，一切正常。

Answer 3

这对我有用。但是，（仅供参考），id不应包含连字符。

注意：我只在#openModal上使用内联HTML事件处理程序来显示其click事件被触发，但您没有向该链接添加任何操作，所以否则它会没做什么。不要在实践中使用内联HTML事件处理程序。

$(function(){

        $('#uploadButton').on('click', function () {
           alert("Upload Button has been clicked");
            $('#uploadLink').trigger("click");
        });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Upload the image you want on your cake:<a href="#" id="uploadButton" class="button">Upload</a> </p>

<a href="#openModal" id="uploadLink" onclick="alert('Open Modal has been clicked!')">I am the Open Modal link</a>
<div id="openModal" class="modalDialog">
    <div><a href="#close" title="Close" class="close">I am the Close link</a>
        <?php require 'image-upload.php'; ?>
    </div>
</div>

Jquery：.click（）不起作用

3 个答案: