为什么我的td onClick没有开火?

时间:2014-10-13 17:55:55

标签: javascript jquery html css

我正在动态地将一个背景图像添加到表中,并且具有.click函数,该函数启用了一个基本上灰化该单元格的类。

    var url;
    url = images[i];
   newImage = "url("+url+")";


    document.getElementById('sq'+(i+1)).style.backgroundImage = newImage;
}
$('body').on('click','td', function() {


    alert("Clicked");
    $(this).toggleClass('ui');

    if ($(this).data('value') == 1) {
        $(this).data('value', 0);
    } else {
        $(this).data('value', 1);
    }

这是css课程' ui'

.ui {
visibility: hidden;
 border: 3px solid black;
background-color: #ff1e72 !important;
color: #FFF !important;

}

这是表格html

<tr>
                            <td data-value="0" id="sq1"></td>
                            <td data-value="0" id="sq2"></td>
                            <td data-value="0" id="sq3"></td>
                            <td data-value="0" id="sq4"></td>
                            <td data-value="0" id="sq5"></td>
                        </tr>

3 个答案:

答案 0 :(得分:2)

你应该尝试这样的事情:

更新:您应该使用$(this).attr("data-value",thevalue);

$(function(){
$("td").click(function(){
    alert("Clicked");    
    $(this).toggleClass('ui');

    console.log($(this).data('value'));
    if ($(this).data('value') == 1) {
        $(this).attr("data-value",0);
    } else {
         $(this).attr("data-value",1);
    }
});
});

工作小提琴:http://jsfiddle.net/robertrozas/mktsapk5/3/

答案 1 :(得分:0)

就像所说的A. Wolff你必须把jquery包含在Dom Ready事件中因为jquery需要在执行任何动作之前扫描dom.Like说A. Wolff你必须在jumery事件中包含jquery因为jquery需要在执行之前扫描dom任何行动,这必须有所帮助:

$(document).ready(function() {

    $('body').on('click','td', function() {
        alert("Clicked");
        $(this).toggleClass('ui');

        if ($(this).data('value') == 1) {
            $(this).data('value', 0);
        } else {
            $(this).data('value', 1);
     }
});

答案 2 :(得分:0)

你应该:

$(document).ready(function() {
    $( "#some-class tbody td" ).on( "click", function() {
       $(this).toggleClass('ui');
   });
}); 

尝试文档准备好在文档就绪的情况下触发jquery;我不确定你的脚本会发生什么。有一些类开始挖掘html,基于类名准确访问是一个好主意。你绝对应该使用tbody来构建一个结构良好的HTML。现在这没有经过测试。我会尝试使用jquery脚本块来测试整个脚本以解决您的问题。