jQuery点击不触发

Question

我目前正在为客户开发一个wordpress插件，并且在使用jQuery脚本时遇到了一些麻烦。

我有一个具有这种结构的表：

    <table>
    <tr>
    <td>Element</td>
    <td  class="field-value" data-type="radio">value</td>
    </tr>
    <tr>
    <td>Element</td>
    <td class="field-value" data-type="text">value</td>
    </tr>
    </table>

等等。 我想用jQuery使.field-value可编辑。

这是我的脚本：

jQuery(document).ready(function () {

jQuery(document).on("click", ".field-value", function (e) {
    e.preventDefault();
    alert("clicked");
    var OriginalContent = jQuery(this).text();
    var type = jQuery(this).attr("data-type");
    console.log("Clicked");
    if (type == "radio") {
        var q_id = jQuery(this).attr("id");
        var type = jQuery(this).parent().prev(".value-field").attr("id");
        var a = jQuery(this);
        console.log(this);
        jQuery.ajax({
            type: "post",
            data: {
                q_id: q_id,
                type: type
            },
            url: "wp-content/plugins/cg-form-plugin/get-options.php",
            dataType: "html",
            success: function (data) {
                jQuery(a).parent().prev(".value-field").html(data);
            },

        });
    } else if (type == "text") {
        var a = jQuery("input[name=edit]").val();
        var qu_id = jQuery("input[name=edit]").closest(".value-field").next().find(".edit").attr("id");
        var v_id = jQuery(this).closest(".et_pb_toggle").attr("id");
        var type = jQuery("input[name=edit]").attr("id");
        jQuery(this).html("<input type='text' value='" + OriginalContent + "' />");
        jQuery(this).children().first().focus();
        jQuery(this).children().first().blur(function (e) {
            var newContent = jQuery(this).val();
            jQuery.ajax({
                type: "post",
                data: {a:a, qu_id: qu_id, v_id:v_id, type: type},
                url: "wp-content/plugins/cg-form-plugin/update-array.php",
                dataType: "html",
                success: function(data) {
                    location.reload();
                },
            });
        });
    }

});
});

我的问题是.on（“ click”）事件不会触发。 我已经尝试了几个小时，尝试使用.click（）;。 和其他一些东西。

我在脚本中还有其他函数，它们具有类似的.on（“ click”）事件，效果很好。 我不知所措。

有人能指出我正确的方向吗？

编辑：摆弄实际表： http : //jsfiddle.net/qr7477ea/2/

****我，这是价值领域而不是领域价值。 3个小时浪费在如此愚蠢的事情上。 无论如何，谢谢！

Answer 1

的. 是让Query选择器知道它正在获取一个类，您不想在定义一个类时使用它。 因此删除. 在class=".field-value"

<td ... class="field-value">value</td>

Answer 2

从您的班级名称中删除该点：

它应该是：

<td id="(type)" class="field-value">value</td>  

代替：

<td id="(type)" class=".field-value">value</td>

Answer 3

更改：

jQuery(document).on("click", ".field-value", function (e) {

至

jQuery(".field-value").on("click", function (e) {

在初始版本中，您基本上是在.field-value的后代中寻找一个document元素。