试过环顾四周，我的一个动态触发器陷入困境。
我已经检查了与此相关的其他线程，但似乎有一些其他代码错误可能导致建议的.on方法失败。
代码旨在隐藏/显示2个单独的 - 有一些初始预渲染的，有些在动态加载。
预渲染很好，动态失败。
Jquery：
$("div .flipper_link").on("click", function () {
$(this).parent().find(".contain_content").toggle();
$(this).parent().find(".card-tags").toggle();
});
动态创建的代码：
<div class="callout_surround">
<div class="callout ct_shop">
<div class='header-global header-shop'>Shop</div>
<div class="flipper_link header-shop"><i class="fi-loop"></i></div>
<div class='contain_content' uid="74" data-popup-open="popup-1">
<img src='images/someimage.jpg' class='img_cont'/>
<div class='tile-text-cont'>
<div class='tile-desc'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque
</div>
</div>
</div>
<div class="card-tags">Some tags etc</div>
</div>
</div>
我对jQuery很新，所以如果我使用了错误的方法，请道歉！
答案 0 :(得分：0)
对于动态HTML，请使用jquery on()方法，如：
$(document).on("click",".flipper_link", function(){
// do some thing here
});
答案 1 :(得分：0)
您在点击事件上附加的选择器不能是动态的。如果删除该选择器然后再次添加它，则会删除on click事件或任何jQuery事件。
您必须将事件附加到开头的选择器，并且始终存在。您不能使用动态添加的或稍后删除的。
值得庆幸的是，jQuery的live()方法让我们有机会指定第二个选择器来缩小范围并实现您想要实现的目标。以前使用live()来实现这一目标，但新方法更快。如果您使用的是旧版本的jQuery，则可能需要使用.click。如果这不起作用，请告诉我您的版本。
建议不要在标记中使用onclick事件，原因很多，我不会在这里进行操作。您可以查看validation，但不推荐使用$("#non-dynamic").on("click", ".flipper_link", function () {
。例如，也不建议使用$（document）.on（）将事件附加到主文档，因为每次有人点击页面上的任何内容时都会触发该事件。
您将把事件放在非动态的初始选择器上，然后在第二个参数中引用您的动态选择器，如下所示：
$(document).ready(function() {
$("#non-dynamic").on("click", ".flipper_link", function () {
$(this).parent().find(".contain_content").toggle();
$(this).parent().find(".card-tags").toggle();
});
});您必须向您的代码添加更多代码，或在您的标记中引用更高级别的非动态选择器。这是一个工作片段：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="non-dynamic">
<div class="callout_surround">
<div class="callout ct_shop">
<div class='header-global header-shop'>Shop</div>
<a class="flipper_link header-shop">
<i class="fi-loop">Test Link</i>
</a>
<div class='contain_content' uid="74" data-popup-open="popup-1">
<img src='images/someimage.jpg' class='img_cont'/>
<div class='tile-text-cont'>
<div class='tile-desc'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque
</div>
</div>
</div>
<div class="card-tags">Some tags etc</div>
</div>
</div>
</div>//Get post text
String text = post.getText();
//Get weight of space character in px
float spaceWeight = paint.measureText(" ");
//Start main algorithm of drawing words on canvas
//Split text to words
for (String line : text.split(" ")) {
//If we had empty space just continue
if (line.equals("")) continue;
//Get weight of the line
float lineWeight = paint.measureText(line);
//If our word(line) doesn't have any '\n' we do next
if (line.indexOf('\n') == -1) {
//If word can fit into current line
if (cnv.getWidth() - pxx - defaultMargin >= lineWeight) {
//Draw text
cnv.drawText(line, pxx, pxy, paint);
//Move start x point to word weight + space weight
pxx += lineWeight + spaceWeight;
} else {
//If word can't fit into current line
//Move x point to start
//Move y point to the next line
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
//Draw
cnv.drawText(line, pxx, pxy, paint);
//Move x point to word weight + space weight
pxx += lineWeight + spaceWeight;
}
//If line contains '\n'
} else {
//If '\n' is on the start of the line
if (line.indexOf('\n') == 0) {
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
cnv.drawText(line.replaceAll("\n", ""), pxx, pxy, paint);
pxx += lineWeight + spaceWeight;
} else {
//If '\n' is somewhere in the middle
//and it also can contain few '\n'
//Split line to sublines
String[] subline = line.split("\n");
for (int i = 0; i < subline.length; i++) {
//Get weight of new word
lineWeight = paint.measureText(subline[i]);
//If it's empty subline that's mean that we have '\n'
if (subline[i].equals("")) {
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
cnv.drawText(subline[i], pxx, pxy, paint);
continue;
}
//If we have only one word
if (subline.length == 1 && i == 0) {
if (cnv.getWidth() - pxx >= lineWeight) {
cnv.drawText(subline[0], pxx, pxy, paint);
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
} else {
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
cnv.drawText(subline[0], pxx, pxy, paint);
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
}
continue;
}
//If we have set of words separated with '\n'
//it is the first word
//Make sure we can put it into current line
if (i == 0) {
if (cnv.getWidth() - pxx >= lineWeight) {
cnv.drawText(subline[0], pxx, pxy, paint);
pxx = defaultMargin;
} else {
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
cnv.drawText(subline[0], pxx, pxy, paint);
pxx = defaultMargin;
}
} else {
pxx = defaultMargin;
pxy += paint.descent() - paint.ascent();
cnv.drawText(subline[i], pxx, pxy, paint);
pxx += lineWeight + spaceWeight;
}
}
}
}
}
答案 2 :(得分：-1)
一种简单的解决方法是将您的javascript更改为：
<script>
function flipValues(div) {
$(div).parent().find(".contain_content").toggle();
$(div).parent().find(".card-tags").toggle();
}
</script>
更改动态生成的html，让div上的onclick翻转。
示例：
<div class="flipper_link header-shop" onclick="flipValues(this);">
<i class="fi-loop"></i>
</div>