Question

尝试使用id（在我的示例中为id = reset）（on.click）动作创建对span或元素的反应。我试图通过getElementByID或.find找到我的元素或只是.click但它不起作用...也许是因为我要按的是孩子的孩子......我不确定，谢谢你帮助...正确的问题是：我的btnClick函数应该如何正常工作？

我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MIB2/MIB2+ Tool</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/chartist.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js">
    </script>
    <script src="js/controler.js"></script>
    <script src="js/chartist.min.js"></script>

</head>
<body>
<div class="navbar navbar-inverse">
    <ul class="nav navbar-nav" role="tablist">
        <li>
            <a href="javascript:void(0);" data-address="ip-info.php" data-role="targets">
                available targets
            </a>
        </li>
</div>
<div class="container-fluid well-lg">
    <div id="targetInformation" class="container">
    </div>
</div>
</body>
</html>

my ip-info.php：

echo'
<div class=" col-md-4 col-sm-6 col-xs-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span id="reset" title="Power Switch" class=" pull-right hover glyphicon glyphicon-repeat" style="cursor: pointer;" aria-hidden="true">
                </span>
            </h3>

        </div>
    <div class="panel-body text-center">';
        </div>
    </div>
</div>';

我的控制器.JS：

var TargetInformation = [
    'ip':'1.2.3.4',
    'ip':'5.6.7.8'
]

var SCRIPT = {
    init : function(){
        this.clickOnMenu();
    },
    clickOnMenu: function(){
        $("ul.nav a").on('click',function() {
                            $("#targetInformation").html(''); // clean screen
                            var role = $(this).data('role');
                            switch(role) {
                                case 'targets':
                                    for(i=0; i< TargetInformation.length; i++) {
                                        $.get( $(this).data('address'), {'ip':TargetInformation[i]}, function (data) {
                                            $("#targetInformation").append(data);
                                        });
                                    }
    }
}
var aaa = {
    btnClick: function()
    {
        $(document).find("#reset").on('click',function() {
            console.log('hello');
        });
    }
}

$(document).ready( function(){
    SCRIPT.init();
    aaa.btnClick();
} );

Answer 1

代码的问题在于，当调用aaa.btnClick()时，没有id重置的元素，因此从附加事件中忽略它。从aaa.btnClick()中删除.ready并将其放在php中或获取后。你可以尝试这样的事情：

在js文件中，添加一个全局变量以确保不会一次又一次地添加同一事件。类似于：var clickedOnce = false;

然后将你的for循环更改为，

for(i=0; i< TargetInformation.length; i++) {
     $.get( $(this).data('address'), {'ip':TargetInformation[i]}, function (data) {
         $("#targetInformation").append(data);
         if(clickedOnce == false){aaa.btnClick(); clickedOnce=true;}
     });
}

Answer 2

由于您单击<a>尝试阻止默认事件。同时更改附加事件的方式，使用id作为选择器

btnClick: function()
    {
        $("#reset").click(function() {
            console.log('hello');
        });
    }

Answer 3

在你的btnClick函数中尝试这个 -

$('html').on('click', "#reset", function() {
            console.log('hello');
        });

通过js在html中创建单击操作

3 个答案: