jQuery on click not triggering

Question

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!

Note id's need to be unique, you don't want to have two (type)'s. — Spencer Wieczorek
– Spencer Wieczorek, Commented May 7, 2015 at 12:13
Your code works fine for me(I tested till alert() ofcrse) after your edit. here — Zee
– Zee, Commented May 7, 2015 at 12:17
Your click event shud listen on value-field class and not field-value. — Zee
– Zee, Commented May 7, 2015 at 12:29

Spencer Wieczorek · Accepted Answer · 2015-05-07 12:11:41Z

3

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>

answered May 7, 2015 at 12:11

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ooglyeyes Over a year ago

The dot was a mistake i made when i recreated the structure, it's not there in the actual document. I've edited my question to reflect this.

Spencer Wieczorek Over a year ago

@ooglyeyes Seems to work fine then. Make sure you click the "value" text and ensure jQuery was added properly.

Luthando Ntsekwa · Accepted Answer · 2015-05-07 12:11:25Z

0

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>

answered May 7, 2015 at 12:11

Luthando Ntsekwa

4,2486 gold badges26 silver badges53 bronze badges

1 Comment

ooglyeyes Over a year ago

The dot was a mistake i made when i recreated the structure, it's not there in the actual document. I've edited my question to reflect this.

SmartDev · Accepted Answer · 2015-05-07 12:13:12Z

-2

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.

answered May 7, 2015 at 12:13

SmartDev

2,8821 gold badge20 silver badges23 bronze badges

1 Comment

ImreNagy Over a year ago

It's the other way around. Both variants do the same except that the OP's example also extends to dynamically added .field-value elements.

Collectives™ on Stack Overflow

jQuery on click not triggering

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related