我正在尝试根据在相应弹出窗口上单击/输入的值来更新我的 div 值。
我收到一条消息“我单例,没有 child ”,单击“单例”后,会出现一个弹出窗口,其中包含选项(单例/已婚)。如果用户点击“已婚”,那么“我是”应该替换为“我们已结婚,没有 child ” JSFIDDLE有效。
当我尝试再添加一行时,用户在弹出窗口中输入年龄并单击“确定”,标签中的文本应该更新。这是fiddle 。我尝试了这个机智事件委托(delegate)..它不起作用
@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
}
});
最佳答案
@Trevor 是正确的,因为您的选择器不正确。 .popover
函数将弹出窗口附加到 body
元素(有一个 container
参数应该允许您覆盖它, but it is apparently non-functional ) .
因为弹出窗口附加到正文,所以它不是 .popover-markup
的后代。将选择器更改为 .popover-content li
和 .popover-content button
可以很好地找到它们并发生委派。
您的处理程序中还存在一些其他问题(从在未定义 event
时调用 event.target
开始),但它们很容易纠正。
关于Jquery 事件委托(delegate)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19944752/