2016-10-27 3 views
0

Ich habe einen Textbereich, der nach einem Klick auf eine Schaltfläche ausgefüllt wird.Trigger Jquery auf ein Element sofort nachdem es ausgefüllt wird

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

Jetzt möchte ich etwas geschehen, nachdem es aufgefüllt wird. Ich habe onchange und einige andere Optionen versucht, aber sie arbeiten nur, nachdem der Textbereich bevölkert ist und wir seinen Inhalt ändern. Ich möchte es direkt nach der Textbereich wird mit Json vom Back-End bevölkert. Wie kann das

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

erfolgen Dies nicht

funktioniert ich hier den gesamten Code für den Fall, Einfügen bin es

<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"> 
 
    \t {{ 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"); 
 
}); 
 
\t }); 
 

 
\t \t 
 
</script> 
 
    </body> 
 
</html>

hilft

Der Controller der Seite

\t 
 
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 = [] 
 
\t  urls = [] 
 
      for (p in response.data.params) { 
 
       params.push([p, response.data.params[p]]) 
 
      } \t 
 
\t  for (i in response.data.bf_value) { 
 
\t \t for(j in response.data.bf_value[i]) { 
 
\t \t \t } 
 
\t \t 
 
    \t } 
 
\t  for(t in response.data.items) { \t 
 
\t \t p ="" 
 
\t \t for (s in response.data.bf_value) { 
 
\t \t \t p+=response.data.bf_value[s][t] 
 
\t \t \t 
 
\t \t } 
 
\t \t response.data.items[t].bf_value = p 
 
\t \t } 
 
\t  console.log(response.data.bf_value); 
 
      $scope.data = response.data 
 
\t  $scope.data.classi = response.data.classify \t 
 
      $scope.data.p = params 
 
      $scope.data.u = urls 
 

 
     }); 
 
    
 
    } 
 
});

+1

_happen, nachdem es bevölkert wird_ Wie wird es bevölkert? – Satpal

+1

Randnotiz: Sie können diese ID nicht gemäß den HTML-Spezifikationen verwenden. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Roberrrt

+0

es wird mit einem Json vom Back-End bevölkert. {{data.bf}} –

Antwort

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

Diese funktionieren sollte.

+1

Es ist nicht mit '