1

我正在尝试根据在相应弹出窗口上单击/输入的值更新我的 div 值。

我有一条消息，上面写着“我是单身，没有孩子”，点击单身时会出现一个带有选项（单身/已婚）的弹出框。如果用户点击已婚，那么我应该被替换为 We are MARRIED with no kids JSFIDDLE作品。

当我尝试再添加一行时，用户在弹出窗口中输入年龄并单击确定，标签中的文本应该被更新。这是小提琴。我试过这个机智的事件委托..它不工作

@Pete——我尝试使用 data-btn 自定义属性，因为我将重新使用“.popover-content 按钮”。我修改了UPDATED FIDDLE似乎没有用..有什么见解吗？？

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
    }
});
4

2 回答 2

2

@Trevor 是正确的，因为您的选择器不正确。该.popover函数将弹出框附加到body元素（有一个container参数应该允许您覆盖它，但它显然是非功能性的）。

因为弹出框附加到正文中，所以它不是.popover-markup. 将选择器更改为.popover-content li并.popover-content button很好地找到它们并进行委托。

您的处理程序中还有一些其他问题（从event.target您没有定义时调用开始event），但它们很容易得到纠正。

工作演示：http: //jsfiddle.net/R28sQ/10/

于 2013-11-13T04:48:41.583 回答
1

所以我把你改成.popover-markup button了.popover-content button因为我在你的按钮上看不到那个类。我认为这就是为什么您的事件没有触发的原因，因为您的点击功能上有错误的类。

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

我不得不对你获得价值的方式进行一些改变。

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;

小提琴示例

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

于 2013-11-13T03:47:07.920 回答