在元素被填充后立即对其触发Jquery

Trigger Jquery on an element immediately after it gets populated

本文关键字：Jquery 元素填充更新时间：2023-09-26

我有一个文本区域，它在单击按钮后填充。

<textarea rows="4" cols="50" id="4321">
  {{ data.classi}}
</textarea>

现在，我希望在它被填充之后发生一些事情。我尝试过onchange和其他一些选项，但它们只有在填充文本区域并更改其内容后才有效。我希望它能在从后端用json填充文本区域之后立即发生。如何做到这一点

$('#4321').on('change', function() {
  alert( this.value ); // or $(this).val()
});

不起作用

我将整个代码粘贴在这里，以防对有帮助

<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
   <script src="jquery.json-view.js"></script>
  <link href="jquery.json-view.css" rel="stylesheet"></link>
    <style>
        table, th , td  {
          border: 1px solid grey;
          border-collapse: collapse;
          padding: 5px;
        }
        table tr:nth-child(odd) {
          background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
          background-color: #ffffff;
        }
    </style>
  </head>
  <body ng-controller="DebugController">
    
    <div>
      <input type="text" ng-model="query" placeholder="Search Query">
      <input type="text" ng-model="pog"  placeholder="Enter No of POGs">
      <button ng-click="onSearch()" class="button" id ="abcd">Search</button>
    </div>
    <textarea rows="4" cols="50" id="abc">
 	 {{ data.classi}}
   </textarea>
    <div>
        <h4>Parameters</h4>
         <table>
          <tr ng-repeat="x in data.p ">
            <td>{{ x[0] }}</td>
            <td>{{ x[1] }}</td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Classifier Scores</h4>
        <table>
          <tr>
            <th>Category URL</th>
            <th>Additive Boost</th>
          </tr>
          <tr ng-repeat="x in data.classifier">
            <td>{{ x[0] }}</td>
            <td>{{ x[1] }}</td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Product Groups (POGs)</h4>
        <table>
          <tr>
            <th>Id</th>
            <th>Details</th>
            <th>Score</th>
            <th>HPSA Score</th>
            <th>BF Score</th>
            <th>Word Match</th>
            <th>Classifier Score</th>
            <th>QUL Score</th>
          </tr>
          <tr ng-repeat="x in data.items | limitTo: limit " >
            <td><a href="{{ x.get }}">{{ x.id }}</td>
            <td>
                <p><b>{{ x.name[0] }}</b></p>
                <p><u>Brand</u>: {{ x.Brand }}; <u>Category URL</u>: {{ x.mlnURL }};<u>Price</u>: Rs {{x.Price}} </p>
            </td>
            <td>
                <p><a href="{{x.explain}}"><b>{{ x.score }}</b></a></p>
                Classifier Score: {{ x.cscore }} <br>
                Document Score: {{ x.sscore }} </p>
            </td>
            <td>
                <p><b> {{ x.hpsaScore_default }} </b></p>
            </td>
            <td>
                <p><b> {{ x.bf_value }} </b></p>
            </td>
            <td>
            </td>
            <td>
                <p> <b> {{ x.cscore }} </b></p>
            </td>
            <td>
            </td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Solr Query</h4>
        <p>{{ data.query }}</p>
    </div>
<script>
var pog;
$(function() { 
 $('#abc').on('input', function() {
    alert("hi");
});
	});
		
</script>
  </body>
</html>

页面的控制器

	
var app = angular.module('myApp', []);
app.controller('DebugController', function($scope, $http) {
  $scope.onSearch = function () {
    $scope.data = {}
    number = $scope.pog
    $scope.limit = number
    $http.get('/search?q=' + $scope.query)
       .then(function(response) {
            console.log(response)
            params = []
	    urls = []
            for (p in response.data.params) {
                params.push([p, response.data.params[p]])
            }	
	    for (i in response.data.bf_value) { 
		for(j in response.data.bf_value[i]) {
			}
		
   	  }
	    for( t in response.data.items ) {	
		p =""
		for ( s in response.data.bf_value ) { 
			p+=response.data.bf_value[s][t]
			
		}
		response.data.items[t].bf_value = p
		}
	    console.log(response.data.bf_value);
            $scope.data = response.data
	    $scope.data.classi = response.data.classify	
            $scope.data.p = params
            $scope.data.u = urls 
        });
   
  }
});

使用input事件。(mdn(

$('#hello').on('input', function() {
    console.log($(this)[0].value) // console logs the value of the textarea
});

 $("#4321").change(function(){
        alert("The text has been changed.");
    });

这应该行得通。