CODEWITHSUNDEEP
javascriptjquerywordpress
ooglyeyes
ooglyeyes

Reputation: 1

jQuery on click not triggering

I'm currently working on a wordpress plugin for a customer and i've run into some trouble with a jQuery script.

I have a table with this structure:

    <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>

And so on. I want to make .field-value editable with jQuery.

Here is my script:

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();
                },
            });
        });
    }

});
});

My problem is, that the .on("click") event doesn't trigger. I've been playing around with it for some hours now, trying .click(); and some other stuff.

I have other functions in the script with similar .on("click") events, which works just fine. I am at a loss as to what's wrong.

Anyone able to point me in the right direction?

Edit: fiddle with actual table: http://jsfiddle.net/qr7477ea/2/

**** me, it's value-field not field-value. 3 hours wasted on something so stupid. Thanks anyway ppl!

Upvotes: 0

Views: 116

Answers (3)

SmartDev
SmartDev

Reputation: 2862

Change:

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

to

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

In your initial version you are basically looking for a document element in the descendants of .field-value.

Upvotes: -2

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

The . is for Query selector to know that it's getting a class, you don't want to use it when defining one. So remove the . in class=".field-value"

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

Upvotes: 3

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

remove the dot from your class name:

it should be:

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

Instead of:

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

Upvotes: 0

Related Questions