Question

我有一个模态。我想要执行操作的图标。下面是我的函数，我正在调用图标的单击事件，但它不起作用。

$(document).ready(function() {
        $(document).on('click', '.fc-day', function() {
            $('#tmd_schedule').modal('toggle');
        });
        $(document).on('click', '#add_tmd', function() {
            console.log("hi");
        });
});

这是我的HTML代码

<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd"></i>

Answer 1

请尝试$('#add_tmd').click(function() { console.log("hi"); });。

使用文档选择器在这里没有意义;使用元素选择器会更有效。此外，click()函数执行与on('click', ...)相同的功能，但它更简洁。

Answer 2

查看下面的代码段

$(document).ready(function() {
        $(document).on('click', '.fa-calendar', function() {
            //$('#tmd_schedule').modal('toggle');
             console.log("hi");
        });
        $(document).on('click', '#add_tmd', function() {
           console.log("hello");
        });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd">
</i>
<i class="fa fa-calendar col-md-2 form-control-feedback"></i>

点击已添加到图标上，可能与您的模式有关。

Answer 3

将您的HTML更改为..

<i id="add_tmd" class="fa fa-plus pull-right"></i>

只需从图标中删除form-control-feedback课程即可。它在pointer-events: none;中具有bootstrap css属性。这就是你无法点击图标的原因。

Answer 4

您附加点击事件的位置看起来不正确，

Class1 obj = new Class1();
obj.di();

Answer 5

请查看on功能的文档。因为以前版本的jQuery具有live和delegate函数具有相同的行为。

$(document).ready(function() {
        
        $(document.body).on('click', '#add_tmd', function() {
            alert("hi");
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd">Test</i>

Answer 6

使用选择器代替文档添加点击事件。

$(document).ready(function() {
        $('.fc-day').on('click', function() {
            $('#tmd_schedule').modal('toggle');
        });
        $('#add_tmd').on('click', function() {
            console.log("hi");
        });
});

你也可以使用jquery点击功能来简化它。

$(document).ready(function() {
        $('.fc-day').click(function() {
            $('#tmd_schedule').modal('toggle');
        });
        $('#add_tmd').click(function() {
            console.log("hi");
        });
});

onclick函数无法处理模态上的图标

6 个答案: