不会触发点击功能 - AJAX/CSS

我试图触发jQuery功能点击我的一个输入。不会触发点击功能 - AJAX/CSS

这个简单的例子是这样的：

的jQuery：

<script> 
$('.i-check').click(function(){ 
alert("The class was clicked."); 
}); 
</script>

的输入

<div class="checkbox"> 
    <label> 
    <input class="i-check" type="checkbox" name="all-inclusive" value="6"/>All-inclusive</label> 
</div>

的CSS

.i-check, 
.i-radio { 
    display: inline-block; 
    *display: inlne; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    width: 22px; 
    height: 22px; 
    border: 1px solid #ccc; 
    cursor: pointer; 
    top: 1px; 
    left: -7px; 
    margin-left: -13px; 
    float: left; 
    text-align: center; 
    line-height: 20px; 
    -webkit-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -o-transition: 0.3s; 
    -ms-transition: 0.3s; 
    transition: 0.3s; 
    position: relative; 
    overflow: hidden; 
} 
.i-check:before, 
.i-radio:before { 
    content: '\f00c'; 
    font-family: 'FontAwesome'; 
    -webkit-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -o-transition: 0.3s; 
    -ms-transition: 0.3s; 
    transition: 0.3s; 
    -webkit-transform: translate3d(0, -25px, 0); 
    -moz-transform: translate3d(0, -25px, 0); 
    -o-transform: translate3d(0, -25px, 0); 
    -ms-transform: translate3d(0, -25px, 0); 
    transform: translate3d(0, -25px, 0); 
    display: block; 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    color: #fff; 
    font-size: 14px; 
} 
.i-check.hover, 
.i-radio.hover { 
    border: 1px solid #ed8323; 
} 
.i-check.checked, 
.i-radio.checked { 
    border: 1px solid #ed8323; 
    background: #ed8323; 
} 
.i-check.checked:before, 
.i-radio.checked:before { 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
} 
.i-check.disabled, 
.i-radio.disabled { 
    border-color: #d9d9d9 !important; 
} 
.i-check.disabled.checked, 
.i-radio.disabled.checked { 
    background: #ccc !important; 
} 
.i-check.i-check-stroke.checked { 
    background: #fff; 
} 
.i-check.i-check-stroke.checked:before { 
    color: #ed8323; 
}

如果我更改CSS类名别的东西然后我检查 - 然后运行它，它的工作原理。所以我知道它与我的CSS有关，我只是无法弄清楚什么？

来源

2015-03-02 Troels Johannesen

你使用的是iCheck插件吗？如果是的话，使用API插件。如果不是，请尝试使用'change'事件 – charlietfl 2015-03-02 17:13:12

是的，我是@charietfl – 2015-03-02 17:15:09

在插件API中使用记录的事件，然后 – charlietfl 2015-03-02 17:16:22

使用API，可以完美运行。对于其他使用这个插件，在选中状态，这应该为你做。

<script> 
     $('.i-check input').on('ifChecked', function(event){ 
      alert('function started'); 
}); 
</script>

这里提到的一件事是，无论何时放置此代码，一定要根据其他jQuery脚本正确放置！将代码放在所有脚本调用的最底部，以确保它不是无法工作的原因。

来源

2015-03-02 17:58:33

请注意CSS中的伪类使用“：”而不是“。”。符号。因此，例如.i-check.hover应该是.i-check：hover。与“禁用”和“检查”伪类相同。

如果您使用iCheck插件 - 请使用他们建议的回调方法。
例如：

$('input').on('ifClicked', function(event){ 
    alert(event.type + ' callback'); 
});

他们也有回调 “ifChecked” 和 “ifUnchecked”

来源

2015-03-02 17:56:21

不会触发点击功能 - AJAX/CSS

回答

相关问题