V-on:通过更改innerhtml添加后单击not working
V-on是Vue.js框架中的一个指令，用于绑定事件监听器。它可以通过更改元素的innerHTML属性来实现添加内容的效果。然而，如果在添加内容后单击事件仍然无法正常工作，可能有以下几个原因：
- 事件绑定问题：请确保正确地绑定了点击事件。可以使用v-on指令来监听点击事件，并指定相应的处理函数。
- 元素不存在或未正确渲染：如果添加的内容是动态生成的，可能需要等待元素正确渲染后再绑定事件。可以使用Vue.js的生命周期钩子函数mounted来确保元素已经渲染完成。
- 事件冒泡问题：如果添加的内容中包含了其他元素，并且这些元素也有点击事件，可能会导致事件冒泡。可以使用事件修饰符.stop来阻止事件冒泡，确保只触发当前元素的点击事件。
- 事件委托问题：如果添加的内容是通过innerHTML直接改变元素的HTML结构，可能会导致事件委托失效。可以考虑使用Vue.js的动态组件或条件渲染来动态添加内容，并确保事件委托机制正常工作。
综上所述，如果通过更改innerHTML添加内容后单击事件不起作用，可以检查事件绑定、元素渲染、事件冒泡和事件委托等方面的问题。如果问题仍然存在，可能需要进一步调试和排查。
相关·内容
1回答
我想用v-on调用创建新的html元素。但是，在调用粘贴在下面的函数后，v-on不会呈现，因此在单击之后没有任何反应。有没有什么办法可以强制vue重新渲染这个元素？
createFromTemplate: function() {
var el = document.body.appendChild(document.createElement('div'));
el.innerHTML = '<a href="#" v-on="click: close()"></a>;
},
浏览 2提问于2015-06-12得票数 0
2回答
我有一个像这样初始化的组件
<custom :opts="{map: false}"></custom>
还有类似于以下内容的HTML
<template id="custom">
<div v-if="opts.map">
I'm awesome
</div>
<button v-on:click="show"></button>
</template>
哪里
function show(){
浏览 0提问于2018-06-26得票数 2
我试图使用v-for创建一个列表，但是我似乎不能在文件对象列表上使用v-bind:class，但是它可以在普通对象上使用。
到目前为止我的代码是：
new Vue({
el: '#app',
data: {
files: [],
objects: [
{ status: 'added' }
]
},
mounted() {
var f = new File([""], "filename");
this.files.push(this.extend(f,
浏览 3提问于2017-04-20得票数 1
回答已采纳
2回答
你好，我想知道单击按钮时如何更改<h3 id="score"> innerHtml。
在Vanilla Javascript中，我可以使用以下方法访问元素：
const score = document.querySelector('#score');
并通过这样做来改变它：
score.innerHtml = "13";
差不多是这样的。
<template>
<div id="scoreboard">
<h4>{{header_my}}</h4>
浏览 2提问于2019-08-11得票数 2
回答已采纳
我试图创建一个动态导航栏，它的作用如下:如果会话已登录，将导航栏从登录和注册更改为配置文件和注销，登录和注册按钮工作得很好，但当使用innerHTML通过js更改它们时，它们不能执行v-on功能:单击 var nav_auth = document.getElementById("nav_auth");
nav_auth.innerHTML = `
<li class="nav-item">
<a class="nav-link" href="?profile"><i cla
浏览 14提问于2020-01-02得票数 0
回答已采纳
我在一个页面上有几个按钮，它们与相同的方法webcamSendRequestButton挂钩。
<button v-on:click="webcamSendRequestButton" value="0" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" val
浏览 17提问于2017-08-31得票数 11
回答已采纳
我希望获得父组件的子元素。
<div
v-on:click.stop.prevent="onClickTemplateHandler">
<div>
<h3 style="">Title</h3>
<p>{{ lorem }}</p>
</div>
</div>
...
onClickTemplateHandler(e) {
console.log(e)
const innerHTML = e.targe
浏览 3提问于2021-12-23得票数 0
1回答
我正在使用为一个小的网络应用程序。整个内容被包装在一个div#app中。如何在#app之外触发函数
var app = new Vue({
el: '#app',
data: {
message: 'I am a working vue app'
},
methods: {
showAlert: function() {
alert("Hello world");
}
}
})
<html>
<head>
<script src="https:
浏览 2提问于2017-04-11得票数 3
回答已采纳
<span @click="showModal = $event.target.innerHtml>Tag 1</span>
<span @click="showModal = $event.target.innerHtml>Tag 2</span>
<span @click="showModal = $event.target.innerHtml>Tag 3</span>
单击3个跨度中的任何一个都会使this.showModal具有每个跨度内容元素的值。但是这段代码看起来是重复的和不必要的。我知
浏览 18提问于2018-07-24得票数 0
我在子组件的axios文章中包含了一个$emit，如下所示。
axios.post('/api/register', qdata)
.then((response) => {
this.$emit('userUpdated', response.data)
})
在父组件中，我在html代码中有一个div元素，其中包含一个v-on，它引用了$emit的$emit。
<div id="username" v-on:userUpdated="nameUpddated($event)">
<
浏览 2提问于2020-06-23得票数 1
回答已采纳
我正在尝试使用Vue获取某个类别的所有图像
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
因此，如果我正在添加一个html块，然后单击get onCategoryManageImageClick按钮，则事件图像($e
浏览 4提问于2020-08-20得票数 0
因此，我正在使用VueJS创建一个简单的待办事项列表应用程序：
<template>
<div>
<br/>
<div id="centre">
<div id="myDIV" class="header">
<h2 style="margin:5px">My To Do List</h2>
<input type="text" id=&#
浏览 0提问于2018-09-24得票数 0
回答已采纳
我有一个时间选择器，它接受最终用户手动选择的时间，并通过单击“当前时间”按钮来设置当前时间。
在情况和时间设置由用户(手动)，我必须显示挂起的图标。如果我点击“当前时间”按钮，这个图标应该被忽略。
我有v-on:change事件，它调用"changeTime()“方法来手动设置所需的时间。在这种情况下，应该显示挂起的图标。
但是，如果我单击“当前时间”按钮，时间将更改为当前时间，v- on :change工作，结果是"changeTime()“方法调用。
如果使用setTime()方法，如何避免调用v-on:change事件？
time.vue中的所有代码
&l
浏览 2提问于2021-02-12得票数 0
回答已采纳
当我点击一个按钮的时候，我想改变文字和图像，我试过了，但是我被卡住了，我不知道如何用它来改变多个元素，
{% for variant in product.variants %}
<label for="variant_{{- variant.id }}">{{ variant.title }} - <img src="{{ variant.image | img_url: '100x100' }}" v-on:click="changeMessage('{{ variant.price | money_with
浏览 0提问于2021-05-24得票数 1
回答已采纳
我希望在下面使用javascript实现，所以行单击它将得到索引并显示该索引的对象。
在django模板中，这是可行的。
<div>{{ project.0.customer_name}}</div>
<div>{{ project.1.customer_name}}</div>
但是即使我得到正确的ID，下面的javascript也不能工作。
var cell = row.getElementsByTagName("td")[0];
var id= parseInt(cell.innerHTML);
// not workin
浏览 6提问于2022-11-30得票数 0
我正在尝试解决这个问题，但还没有成功地使用任何直接的方法，但我只想单击‘添加另一个区域’的链接，然后单击该链接，然后单击现有区域下面的id "vueAC“重新创建整个div。
用我的结构来处理这个问题的最好方法是什么：
<div id="vueAC" class="uk-grid">
<div class="uk-width-2-10" >
<input size="4" type="text" name="mapNumber"
浏览 4提问于2020-08-12得票数 1
回答已采纳
我想找人解释一下为什么这在Vue行不通。
<div id="app">
<button v-on:click="isActive = !isActive">Click me</button>
</div>
JS
vueApp = new Vue({
el: '#app',
data: {
isActive: false
}
});
预期的单击行为： Vue Dev Tools - data: isActive等于true
实际单击行为：数据: Vue Dev T
浏览 2提问于2017-05-08得票数 9
docs
<a @click="doSomething"> ... </a>
是短手
<a v-on:click="doSomething"> ... </a>
为什么这种短手在所有情况下都不起作用？例如,
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn dark v-on="on">
浏览 4提问于2019-10-10得票数 3
回答已采纳
我对JavaScript和正则表达式都很陌生。我有一个简单的任务，把一系列的<%whatever%>替换成网页中的(任何东西)。不知怎么的，regExp只在特定的条件下工作。
我不确定我是否弄错了表达式，也不确定我试图访问document.body.HTML的方式是否错误。请注意代码中的“工作”和“不工作”注释。
<html>
<head>
<script>
</script>
</head>
<body>
Hello, my items are <%abc%>, <%efg%&g
浏览 3提问于2017-02-15得票数 0
回答已采纳
2回答
基本上，我有一个带有v-for的html表，它循环在一个对象数组上，这里没有什么复杂的东西。当用户单击一行时，它会切换“链接”到给定行的对象的selected属性。
现在，我还使用v-bind:class="{'active': n.selected}"设置了一个简单的类绑定，其中n是我的对象，但它不更新。现在更奇怪的是，我使用了vue-cli中的webpack模板，当我：
选择一组行(没有绑定活动类)
更新代码
点击F5触发webpack热重装
选定的行突然得到active类，就像CSS所说的那样，直到webpack热重加载重新生成页面。
浏览 13提问于2016-05-24得票数 1
回答已采纳
我想要一个包含链接的div。单击该链接时，应该用<input type="text">替换该链接，但它只是无法工作。
任何其他html代码都可以工作，但由于某些原因，我无法用输入替换链接：
function working() {
document.getElementById("working").innerHTML = "<h1>Test</h1>";
};
function notworking() {
document.getElementById("notworking")
浏览 2提问于2016-11-17得票数 0
回答已采纳
我想要一个按钮来执行多个单击任务，但按顺序，但是当我简单地添加多个'addEventListener‘时，它只执行最后一个任务。
var btn = document.querySelectorAll(".decision")[0];
var play = document.querySelector("div");
var level = 0;
btn.addEventListener("click",function(){
if (level===0){
btn.innerHTML = "Hello&
浏览 0提问于2018-07-10得票数 0
回答已采纳
尝试让我的动态表在最后一列中有一个按钮。没什么好运气的。任何帮助都非常感谢。
var removeRow=document.createElement("BUTTON");
//Add the data rows.
for (var i = 1; i < data.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < 3; j++) {
浏览 0提问于2018-11-20得票数 0
各位，我有个很奇怪的问题。
在中，我有几个带有onClick事件的list元素，它们都调用相同的函数。
<ul>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">1</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">2</li>
<li onClick="Javascript:
浏览 3提问于2014-04-28得票数 1
回答已采纳
我有一个php文件，回显一个带有<script>元素的超文本标记语言。如下所示：
<div>
<button onclick="FunctionName();">Click Me</button>
</div>
<script type="text/javascript" id="script1">
function FunctionName() {
/* block of code here */
}
</script>
浏览 0提问于2015-04-30得票数 0
1回答
在使用push()将新条目添加到数组后，我正在尝试对数组进行排序。然而，有两个错误。首先，不允许使用排序()。第二，当我移除排序()时，新条目总是以5的数字显示
<body>
<button id="addbtn">Add cars to list</button>
<p id="add"></p>
<script>
let cars = ["bmw", "honda", "toyota", "ford"];
$(doc
浏览 7提问于2022-08-28得票数 -1
回答已采纳
1回答
我已经开始学习vue.js，我想在两个页面之间使用GSAP (而不是css)进行转换，所以我找到了这些属性：v-on:enter，v-on:leave。
似乎我的v-on:enter动画只在我的应用程序的第一个调用上工作。我没有看到“离开”动画，而且当新页面出现时，我有一些重复的内容。
我有两个问题：
我错过了什么？
当DOM完全加载时，如何启动我的v-on:enter动画？(到目前为止，即使我的DOM没有完全加载，我的动画也会启动)
这是我在我的App.vue文件中使用的代码，非常感谢。
<template>
<div id="app"&
浏览 3提问于2019-11-11得票数 1
回答已采纳
我有一个vue组件来删除项目。函数工作的fine.but，被删除的项目仍然是页面，直到我按下重新加载在网页浏览器。以下是vue组件中的delete方法。
deletedItem: function () {
let data = {
"_method" : 'delete',
}
axios.post('/delete-item' +this.id, data);
this.isDelete =false;
浏览 0提问于2021-07-16得票数 2
回答已采纳
我有以下HTML：
<div class="custom-select">
<div class="custom-select-placeholder">
<span id="placeholder-pages">Show all posts</span>
</div>
<ul class="custom-select-list animate-show no-padding no-margin" >
浏览 1提问于2015-10-07得票数 0
回答已采纳
我有一个自定义组件<item>，如下所示：
item.vue
<script>
export default {
render: function (c) {
var self = this;
const contentEl = c('div', {staticClass:'item-content', domProps: {innerHTML: self.content}});
return c('div', {
staticClass: 'item
浏览 7提问于2017-11-24得票数 10
回答已采纳
1回答
我试图通过一个循环为主页上的每个按钮分配一个函数。当点击前三个按钮中的每个按钮时，它应该将会话存储中的一个项设置为true (无论是Grass、软体动物还是毛衣)。当单击底部按钮时，它应该显示所有单击的其他按钮以及单词plants。
例如，如果我单击“发送更多关于草的信息”，然后单击“有关更多信息的东西”，最后一个按钮应该显示“草植物”，如果我单击“发送更多有关软体动物的信息”，则最后一个按钮应该显示“软体动物”。
我的html和javascript文件(我已经指出了我相当确定的部分不能正常工作) (ycount.id应该是"Grass"，“软体动物”或“毛衣”) (infoC
浏览 1提问于2017-02-21得票数 0
回答已采纳
4回答
这是我的代码
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="temp">
<div>
<input type="text" v-on:keydown = "storeValue">
<p>{{ value }}</p>
</div>
<div>
<input type="text" v-on:keyup = &#
浏览 1提问于2018-07-02得票数 2
当我提交表单v-on:submit.prevent='fun()'时，vue.js中的“v-validate”不能与<multiselect>一起使用 <div class="select-inp">
<multiselect v-model="selectedShifts"
track-by="shift_name"
label="shift_name"
placehold
浏览 11提问于2019-12-19得票数 0
回答已采纳
我的代码有问题。
我必须在单击时更改文本
<script type="text/javascript">
$(document).ready(function(){
$('.pokus1').hide().before('<a href="#" id="toggle-example1" class="show" ><div class="nadpis"><div class="nadpis2">Zumba</
浏览 3提问于2011-06-22得票数 1
3回答
我使用vuejs 1.*和jquery.But一起无法触发v-on:单击jquery中的事件。
<a id="test" v-on:click="refresh" href="#" >Cick </a>
我的jquery代码是
$("#test).trigger('click');和我试过触发
$("#test).trigger('v-on:click');也是
浏览 3提问于2016-04-13得票数 2
回答已采纳
我有一个非常简单的存储库。我与SourceTree进行了两次提交。然后创建一个分支working。我对working做出了承诺。
我现在想把它合并回主人，这样我就有了线性的历史。我是新来的，现在知道我做错了什么。此时，我无法签出母版，因为我得到了错误，即使我没有工作副本更改
git -c diff.mnemonicprefix=false -c core.quotepath=false checkout master
error: Your local changes to the following files would be overwritten by checkout:
浏览 3提问于2013-10-11得票数 0
回答已采纳
1回答
我有一份工作表格。但是，为了完成一些JQuery操作(隐藏并显示div)，我需要向表单添加一个id标记。
当我添加id时，jQuery按预期工作，但我的页面停止发布。
if ($_SERVER["REQUEST_METHOD"] == "POST") // this is working
POST working
<form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
POST
浏览 3提问于2016-06-07得票数 0
3回答
我想做一个相当简单的操作:单击li，使用JavaScript (而不是JQuery)获取文本。我想不出(或发现)的是如何获得innerHTML。
function enable() {
document.addEventListener('click', e => {
if (e.target.classList.contains('refine-menu-li')) {
var selected = this.innerHTML;
console.log('stuff'); // Working
浏览 3提问于2016-08-11得票数 1
回答已采纳
当单击div内的按钮时，是否有可能阻止<div>元素上的函数运行？
单击按钮元素时，不应该触发函数：toggleSystemDetails？这在Vue有可能吗？
<div v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
Outer Div
<button v-on:click="toggleTileOptionsMo
浏览 7提问于2017-08-15得票数 108
回答已采纳
我对VueJS非常陌生。
从我所看到的情况来看，可能有一个优雅的答案。我有一个记录表。单击其中一个将打开一个模式，并加载该行/记录。我的代码看起来像这样(使其更容易阅读)：
Javascript
app = new Vue({
el: '#app',
data: {
records: [], //keys have no significance
focusRecord: { //this object will in the modal to edit, initialize it
id: '&#
浏览 0提问于2018-03-21得票数 2
当我单击一个链接时，它会在一个名为“result”的div中显示结果。当我单击另一个链接时，它在相同的div中显示结果，而不清除前面的
结果。这是我的代码，我如何才能使它整洁并且只显示所需的结果。我试过了
const data = document.getElementById("data");
data.innerHTML = '';
但没起作用。
这是我的密码：
const displayItem = (item, value) => {
const pre_data = document.createElement('pre');
浏览 6提问于2022-05-05得票数 1
回答已采纳
1回答
我想在单击时显示输入，但在for循环中，我只想显示单击的输入。
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo }}
</li>
<li class="button-container">
<button class="ml-1 btn
浏览 2提问于2020-04-04得票数 2
回答已采纳
1回答
你会找到我的页面。
我突然遇到的问题是，当你点击文档左下角的开始按钮，然后点击一次“媒体”，菜单div将不会切换。
我试着在Chrome中调试和查看div，当我手动设置它的显示，并检查div (通过在控制台中输入变量"menu“)，它会显示更新的显示，但实际的页面没有显示更改。
所以，一步一步来: 1.点击开始按钮2.点击“媒体”。3.观察和思考，因为菜单div之后不会切换，即使您再次单击start按钮
有什么想法吗？我想这与我用来打开“窗口”的函数有关。
浏览 0提问于2013-02-23得票数 0
我有一个内部带有span的button，它被设置为运行函数v-on:click。我尝试通过将其捕获为一个evt来获取附加到button的value1值(命名约定除外)。 我得到的问题是，如果我点击按钮的一侧，它会按预期运行。但是如果我单击它里面的跨度，我就不能拿起value1了，因为evt.target就是跨度。 我正在将现有的项目转换为Vue，而这不是我所期望的行为。处理这个问题的最好方法是什么？ 谢谢! <button id="touch-button" class="button float-center" value1="19"
浏览 28提问于2020-01-27得票数 1
回答已采纳
单击按钮时，会触发我的testResults()函数。它按其应有的方式创建div。我希望每次单击该按钮时#父div都被清除。但它只在你第一次点击的时候才会这样做。第二次单击#parent div时，没有清除新的div，只是附加了新的div。
这是我的密码：
// DECLARATIONS
var searchActive = false,
emailAddresses = [],
firstName,
lastName,
domainName;
// MAIN FUNCTION
function testResults (form) {
浏览 5提问于2014-09-12得票数 0
回答已采纳
我正在学习JavaScript，并且我正在尝试让用户能够输入姓名，然后单击send按钮。当这种情况发生时，姓名和姓氏就会显示在下面的屏幕上。
问题是它不起作用。当用户单击“发送”按钮时，没有任何反应。
这是我对它的疲惫。
HTML：
<body>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname"
浏览 0提问于2015-07-11得票数 2
回答已采纳
这张桌子看起来是：
\x{e76f}*
当我单击设置此行的转发按钮时，为什么该按钮的类仍然是btn-primary(颜色:蓝色)而不是btn-danger(颜色:红色)？
var app = new Vue({
el: "#app",
data: {
grid_data: [], //ajax
},
methods: {
"forward": function (url, index) {
this.grid_dat
浏览 3提问于2017-06-16得票数 1
回答已采纳
我注意到在Chrome中(我使用的是Chrome35.0.1916.114：也发生在"35.0.1916.153米“，Windows764位)，当我单击左侧按钮时，不仅会引发mouseDown事件(正如我所预期的那样)，而且还会引发mouseMove事件。
在中，如果在输入元素中单击，您将看到引发的每个mouseDown事件为'D‘，而对于每个mouseMove则为'M’。
HTML：
<input id="txt" type="text"/>
<p>Moves</p><p id="mov
浏览 0提问于2014-07-10得票数 13
1回答
我正在构建一个Vue.js应用程序，它允许用户制作和查看产品的提要。 我有一个父元素NewFeed，它允许用户拥有其提要的名称，然后允许用户将产品推送到这个提要中。子元素NewProduct允许用户输入产品的数据，然后推入父元素的products数组。我注意到，每次我将一个新产品推入数组时，数组中的每个元素都被更改为新元素的值。 我如何改变这一点，使元素保持原来的输入状态？ NewFeed (父元素)： Vue.component('NewFeed', {
data: function() {
return {
newFeed: {
n
浏览 90提问于2021-01-14得票数 3
回答已采纳
我有一张表格
HTML：
<form ref="myForm" action="/AAA/BBB" method="get">
<input type="text" hidden="hidden" v-model="myValue" name="myName" />
</form>
<button v-on:click="Send">Click me</button>
JS
new Vue({
d
浏览 18提问于2017-08-28得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
