Question

我的HTML块为：

 <p onchange="changed(this.value)"><span id="output" style="font-weight: bold" ></span></p>

我的功能改变了（str）是：

function changed(str)
{
    console.log("inside changed!!")
}

我正在通过以下语句更改javascript中的p值：

document.getElementById("output").innerHTML="You are the first user, waiting for User 2....";

问题是我看到我的块的值发生了变化，但我可以在控制台中看到控件永远不会进入我的函数change（）。

我试过将onchange="changed(this.value)"移到内部范围内。但我仍然没有从控制台中的函数中获取消息

Answer 1

尝试

输入类型=＆＃34;文字＆＃34;而不是p标签。在输入字段中键入文本后。在文本安慰之后点击外面

Answer 2

它不起作用，因为实际更改的是<span>标记，而不是<p>标记。将onchange事件调用者移动到span标记。

EDIT 你让我相信你的"innerHTML"声明实际上正在发挥作用的问题，这就是错误答案的原因。你也从来没有提到过这个事件应该发生的时间，所以我假设一旦页面加载完毕就会发生，否则，请稍后编写你的事件调用者。

另外，完全删除onchange事件调用者，只需将console.log逻辑放在事件函数中，这样两者都会按顺序发生。

document.addEventListener("DOMContentLoaded", function(){
  var valueText = "You are the first user, waiting for User 2....";
  document.getElementById("output").innerHTML=valueText;
  console.log("Inside changed!! " + valueText);
});

<p><span id="output" style="font-weight: bold;"></span></p>

Answer 3

@Directive({ selector: '[siteMapLeaf]' }) export class SiteMapDirective { constructor( private renderer: Renderer2, private templateRef: TemplateRef <any>, private viewContainer: ViewContainerRef ) {} @Input() set siteMapLeaf(caption) { let captionView = this.templateRef.createEmbeddedView({}); const parentNode = captionView.rootNodes[0]; this.renderer.insertBefore( parentNode, this.renderer.createText(caption), parentNode.firstChild); this.viewContainer.insert(captionView); } }事件用于捕获用户更改输入。这不是你的情况。

尝试使用DOMSubtreeModified事件。

＆＃13;

change

＆＃13;

document.getElementById("changeElem").addEventListener('DOMSubtreeModified', function(event){
  console.log("inside changed!!");
});
setTimeout(function(){
  document.getElementById("output").innerHTML="After change";
}, 1000);

＆＃13;

Answer 4

段落元素不会触发onchange，我相信你正在寻找Mutation Observer。

您也可以查看下面的问题，也许有帮助。

How to use MutationObserver?

Mutation Observer Not Detecting Text Change

Detect paragraph element change with JQuery

Answer 5

您正在尝试对元素内容的更改做出反应。如果使用JavaScript修改p元素的内容，则不会触发更改事件。

您可以使用Mutation Obervers获得所需的行为：

// select the target node
var target = document.getElementById('output');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {
    changed();
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

// changing the target node's content
target.innerHTML = "You are the first user, waiting for User 2...."; 
 
function changed(str)
{
    console.log("inside changed!!")
}

// later, you can stop observing
// observer.disconnect();

<p><span id="output" style="font-weight: bold;"></span></p>

Answer 6

如果您想收听＆＃34; p＆＃34;中的所有更改。元素然后你可以使用DOMSubtreeModified

请谨慎对待此事件，如果您决定更改事件处理程序中的DOM，则很容易导致无限循环。

尝试以下代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 <body>
 <p id="p"><span id="output" style="font-weight: bold" ></span></p>
</body>
<script>
   $( "#p" ).on('DOMSubtreeModified', function () {
  console.log(this);
});  
document.getElementById("output").innerHTML="You are the first user, waiting for User 2....";
</script>
</body>
</html>

Answer 7

onchange支持的html标记为<textarea>，<input>和<select>。有关详细信息，请参阅：

MDN：https://developer.mozilla.org/en-US/docs/Web/Events/change

W3School：https://www.w3schools.com/tags/ev_onchange.asp

Answer 8

'projectmembership_set-0-id': [ '8' ], 'projectmembership_set-0-user': [ '1' ], 'projectmembership_set-0-is_project_manager': [ 'on' ], 'projectmembership_set-0-full_time_equivalent': [ '100.00' ], 'projectmembership_set-0-DELETE': [ 'on' ], 'projectmembership_set-1-id': [ '9' ], 'projectmembership_set-1-user': [ '3' ], 'projectmembership_set-1-is_project_manager': [ 'on' ], 'projectmembership_set-1-full_time_equivalent': [ '100.00' ], 'projectmembership_set-1-DELETE': [ 'on' ], 'projectmembership_set-2-id': [ '10' ], 'projectmembership_set-2-user': [ '7' ], 'projectmembership_set-2-full_time_equivalent': [ '50.00' ], 'projectmembership_set-2-DELETE': [ 'on' ],不支持onchange事件，这就是为什么这不起作用。

onchange支持的HTML标记：复选框，颜色，日期，日期时间，电子邮件，文件，月份，数字，密码，广播，范围，搜索，电话，文本，时间，网址，周，选择和文本区域。

refer this link

改变后的HTML无效

8 个答案: