jQuery not seeing click() event

Question

I'm attempting to change a message describing a product's condition when the user clicks on an element. The code below seems to be valid, however when I click on the element (.conditionOption label), my message is not being changed.

I'm using jQuery 1.7.2, so .live(); is still valid, I have however attempted to switch things to .click() with the same results.

HTML CODE

    <div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
    <div class="productAttributeLabel">
        <label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
            <span class="required">*</span>
            <span class="name">Cosmetic Condition:</span>
            <i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
        </label>
    </div>
    <div class="productAttributeValue">
        <div class="productOptionViewRectangle conditionOption">
            <ul class="list-horizontal">
                <li class="option">
                    <label for="4a43f295a3273a1b90567090ac3fc9f3">
                        <input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
                            <span class="name">Excellent</span>
                        </input>
                    </label>
                </li>
                <li class="option">
                    <label for="f03ed6c05af7ea80dc1b75d853f43026">
                        <input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
                            <span class="name">Good</span>
                        </input>
                    </label>
                </li>
                <li class="option   selected selectedValue">
                    <label for="1598c6f69093cdf495f564397485e044">
                        <input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
                            <span class="name">Fair</span>
                        </input>
                    </label>
                </li>
            </ul>
            <div id="conditionExplanationWrapper">
                <span id="conditionExplanation">MESSAGE 1</span>
            </div>
        </div>
    </div>
    <div class="cf"></div>
</div>

Javascript/jQuery

function conditionExplanation() {
  // Set vars for three conditions
  var excellentMessage = 'MESSAGE 1';
  var goodMessage = 'MESSAGE 2';
  var fairMessage = 'MESSAGE 3';

  // Assign finder class to div
  $('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');

  // Build wrapper for message
  $('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');

  // Insert message corresponding to .conditionOption .selectedValue
  $('.conditionOption label').live('click', function(){
    if ($('.conditionOption .selectedValue:contains("Excellent")')) {
        $('#conditionExplanation').html(excellentMessage);
    } else if ($('.conditionOption .selectedValue:contains("Good")')) {
        $('#conditionExplanation').html(goodMessage);
    } else if ($('.conditionOption .selectedValue:contains("Fair")')) {
        $('#conditionExplanation').html(fairMessage);
    }
  });
}

See Fiddle at https://jsfiddle.net/mvnxg3t4/

`.on()` was added in 1.7, so there's no reason to use `.live()`. — Barmar, Jun 26 '15 at 02:22
See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jun 26 '15 at 02:28
Thanks @Barmar, I'm looking at http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements, it's giving the same result though. — Josh Burdick, Jun 26 '15 at 03:12
@PLAudet I've also tried on('click', ...) with the same result. — Josh Burdick, Jun 26 '15 at 03:13

score 0 · Accepted Answer · answered Jun 26 '15 at 04:41

The problem is that you're comparing the same value over and over; instead you should make use of this and then use regular text search:

var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
    $('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
    $('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
    $('#conditionExplanation').html(fairMessage);
}

$(document).ready(conditionExplanation);

function conditionExplanation() 
{
    // Set vars for three conditions
    var excellentMessage = 'MESSAGE 1';
    var goodMessage = 'MESSAGE 2';
    var fairMessage = 'MESSAGE 3';

    // Assign finder class to div
    $('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');

    // Build wrapper for message
    $('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');

    // Insert message corresponding to .conditionOption .selectedValue
    $('.conditionOption label').live('click', function (e) {
        var value = $(this).text();
        if (value.indexOf('Excellent') != -1) {
            $('#conditionExplanation').html(excellentMessage);
        } else if (value.indexOf('Good') != -1) {
            $('#conditionExplanation').html(goodMessage);
        } else if (value.indexOf('Fair') != -1) {
            $('#conditionExplanation').html(fairMessage);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
    <div class="productAttributeLabel">
        <label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
            <span class="required">*</span>
            <span class="name">Cosmetic Condition:</span>
            <i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
        </label>
    </div>
    <div class="productAttributeValue">
        <div class="productOptionViewRectangle conditionOption">
            <ul class="list-horizontal">
                <li class="option">
                    <label for="4a43f295a3273a1b90567090ac3fc9f3">
                        <input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
                            <span class="name">Excellent</span>
                        </input>
                    </label>
                </li>
                <li class="option">
                    <label for="f03ed6c05af7ea80dc1b75d853f43026">
                        <input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
                            <span class="name">Good</span>
                        </input>
                    </label>
                </li>
                <li class="option   selected selectedValue">
                    <label for="1598c6f69093cdf495f564397485e044">
                        <input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
                            <span class="name">Fair</span>
                        </input>
                    </label>
                </li>
            </ul>
            <div id="conditionExplanationWrapper">
                <span id="conditionExplanation">MESSAGE 1</span>
            </div>
        </div>
    </div>
    <div class="cf"></div>
</div>

wow, thanks! If you don't mind me picking your brain one more time, I think I get it now: Is it because `if ($('.conditionOption .selectedValue:contains("Excellent")')) {` was always hitting the same element? — Josh Burdick, Jun 26 '15 at 04:59
@JoshBurdick Yeah, in particular the `.conditionOption .selectedValue` selector. — Ja͢ck, Jun 26 '15 at 05:11

score -2 · Answer 2 · answered Jun 26 '15 at 02:22

-2

Try using on click and add it in on your on load of body.

 $(function () {


    $('.conditionOption label').click(function () {

    });

});

answered Jun 26 '15 at 02:22

marhs08

57
1
1
6

If he's adding these dynamically, `.click()` won't work. – Barmar Jun 26 '15 at 02:23
$( ".conditionOption label" ).bind( "click", function() { }); – marhs08 Jun 26 '15 at 02:25
No, that won't work either. You have to use delegation for dynamic elements. – Barmar Jun 26 '15 at 02:27

jQuery not seeing click() event

2 Answers2