Question

尝试从javascript函数中调用.on但是在第一次单击时不起作用，但是在第二次点击时，我做错了什么？我知道这适用于$（document）.ready（function（）{}）;但需要从函数调用。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    function callMe() {
        $("a").on("click", function(){
           $(this).parent().parent().remove();
        });
    }
</script>
</head>
<body>
<table>
<tr><TD><a href="#" onclick="javascript:callMe();">[Delete]</a> </TD></tr><
</table>
</body>
</html>

jQuery的：

这是我实际使用.on（）在用户点击时删除表格行的地方。所以我必须从js函数调用.on（），因为你可以看到我从页面传递url：

<TD> <a href="javascript:void(0);" onclick="disabledConfirm_exit=true;javascript:(new removeFileAJAX()).removeFile('dynamic action url coming from the server');">[Remove]</a></TD> 


function removeFileAJAX(){ 
var sendForm = $("#replyMessageForm");  
    return {
        removeFile: function(url) {             
            $("a").on("click", function(){
                $(this).parent().parent().remove();
            });                             
            var that = this;                
            var options = { 
                type: 'POST',
                url: '<portlet:actionURL><portlet:param name="action" value="upload"/></portlet:actionURL>',
                data: $(this).serialize(),                  
                cache: false,                   
                success: function(response){                                                                                                            
                    that.removeFileList();                      
                }
            };                              
            var ajaxForm = sendForm.ajaxForm(options);
            ajaxForm.submit();
            alert('action submit'); 
        },
        removeFileList: function() {                        
        var that = this;
                var options = { 
                    type: 'POST',                       
                    url: '<portlet:resourceURL id="renderRemFile"> </portlet:resourceURL>',
                    data: $(this).serialize(),
                    cache: false,
                    success: function(response){ 
                        ..do stuff;                                                                         
                    }
                };
                var ajaxForm =  sendForm.ajaxForm(options);     
                ajaxForm.submit();
                alert('resource submit');                               
        }       
    };
}

Answer 1

onclick 添加 click事件监听器，它实际上并未触发事件监听器功能。

你真正想做的事情：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
        $("a").on("click", function() {
            $(this).parent().parent().remove();
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td><a href="#">[Delete]</a></td>
        </tr>
    </table>
</body>
</html>

或者，如果你喜欢onclick方法：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
        function clickMe {
            $(this).parent().parent().remove();
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td><a href="#" onclick="clickMe">[Delete]</a></td>
        </tr>
    </table>
</body>
</html>

其他一些说明：

并非所有浏览器都支持使用href="#"。某些浏览器会在单击链接时重新加载页面。您应该使用href="javascript:void(0)"。
您的选择器（"a"）会选择页面上的所有a。相反，您可能希望为class分配id或a，然后使用它来选择特定的a。

Answer 2

删除

 onclick="javascript:callMe();"

并且不要在函数内部分配事件：

  $("a").on("click", function(){
       $(this).parent().parent().remove();
    });

基本上你在调用callMe（）之后分配事件，这就是为什么要删除元素直到第二次点击

Answer 3

您的函数callMe设置了一个on click侦听器，而不仅仅是执行该方法。您还在html中定义了onclick侦听器：

    function callMe() {
        // This sets a listener, so on the first click it begins 
        // for any click on an 'a' element.
        $("a").on("click", function(){
           $(this).parent().parent().remove();
        });
    }



<body>
<table>
<!-- This calls the method above, and will set an on-click listener each
   time it is clicked.  After the 2nd click, you'll have two events associated with 'a' clicks that both get fired, and so on -->
<tr><TD><a href="#" onclick="javascript:callMe();">[Delete]</a> </TD></tr><
</table>
</body>
</html>

如果你想保持html一样，你可以改变你的javascript来做生意：

function callMe() {
    $(this).parent().parent().remove();
}

我会避免在页面上的所有a元素上设置侦听器，因为您可能不希望删除页面上每个链接的父级父级。

Answer 4

声明应该在HTML中执行哪些javascript函数是完全没问题的。但你真正想做的是：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    function callMe(element) {
        $(element).parent().parent().remove();
    }
    </script>
</head>
<body>
    <table>
        <tr><TD><a href="#" onclick="callMe(this);">[Delete]</a> </TD></tr><
    </table>
</body>
</html>

jQuery on（） - 不会在第一次点击时工作

jQuery的：

4 个答案: