CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
dragonfly
dragonfly

Reputation: 3227

Jquery event delegation not working

I'm trying to update my div values based on the value clicked/ entered on the respective popovers.

I've a message reading "I am single with no kids" where on clicking single a popover appears with the option (single / married). If the user clicks married, then I am should be replaced with We are MARRIED with no kids JSFIDDLE works.

When I tried to add one more line, where the user inputs age in the popover and click OK, text in tag should be updated. here is fiddle. I tried this wit event delegation.. Its not working

@Pete -- I tried to use data-btn custom attribute as I'll be re-using '.popover-content button'. I modified the UPDATED FIDDLE didn't seem to work..Any insight??

HTML

<div id="ln1">
    <span data-multiple="We are" data-single="I am" id="m-marital-status">I
        am</span>
    <div class="section-input">
        <div class="popover-markup" id="marital-status"><a href="#" class="trigger">single</a>
            with 
            <div class="head hide"></div>
            <div class="content hide">
                <ul class="marital-status">
                    <li data-sataus="We are">married</li>
                    <li data-sataus="I am">single</li>
                </ul>
            </div>
            <span>no Kids</span>.
        </div>
    </div>
</div>
<div id="ln2">
    I am
    <div class="section-input">
        <div class="popover-markup" id="my-age"><a href="#" class="trigger">35</a>
            <div class="head hide"></div>
            <div class="content hide">
                <div class="form-group">
                    <input class="form-control" placeholder="0" type="text"/>
                </div>
                <button class="btn btn-default btn-block" type="button">ok</button>
            </div>
            <span>no Kids</span>.
        </div>
    </div>
    <span class="hide" id="spouse-info">
        and my spouse is
        <span class="white">32</span>
    </span>.
</div>

Js

$status = $("#m-marital-status")
$('.popover-markup>.trigger').popover({
    html: true,
    placement: 'right',
    content: function () {
        return $(this).parent().find('.content').html();
    }

});
$('body').on("click", ".popover-markup li, .popover-markup button", function () {

    event.preventDefault();
    var target = event.target;

    switch (target.tagName.toLowerCase()) {
    case '.popover-markup li':
        $('.popover-markup>.trigger').popover("hide");
        if ($(this).text() == "married") {
            $status.text($status.data("multiple"));
            $('#marital-status .trigger').text($(this).text());
            $('#spouse-info').removeClass('hide');

        } else {
            $status.text($status.data("single"));
            $('#marital-status .trigger').text($(this).text());
            $('#spouse-info').addClass('hide');
        }
        break;
    case '.popover-markup button':
        var age = $(this).closest('input').val();
        $(this).closest('.popover-markup a').text(age);
        break;

    default:
        // do nothing
    }
});

Upvotes: 1

Views: 1396

Answers (2)

pete
pete

Reputation: 25081

@Trevor is correct in that your selectors are incorrect. The .popover function appends the popover to the body element (there is a container parameter which should allow you to override that, but it is apparently non-functional).

Because the popover is appended to the body, it is not a descendant of .popover-markup. Changing the selector to .popover-content li and .popover-content button finds them nicely and the delegation occurs.

There were a few other problems in your handler (starting with calling event.target when you did not define event) but they were rectified easily enough.

Working demo: http://jsfiddle.net/R28sQ/10/

Upvotes: 2

Trevor
Trevor

Reputation: 16116

So I changed your .popover-markup button to .popover-content button because I could not see that class on your button. I think that is why your event was not firing because you had the wrong class on your click function.

$('body').on("click", ".popover-markup li, .popover-content button", function() {

And I had to make some changes to how you were getting the value.

case 'button':
             var age = $(this).parent().find('input').val();
             $(this).closest('.popover').prev('div').find('.popover-markup a').text(age);
             $('.trigger').popover('hide');  // If you want to hide the popover when clicking okay.
             break;

Fiddle Example

http://jsfiddle.net/R28sQ/3/

Upvotes: 1

Related Questions