Reference: SearchedProduct definiert nicht

JsFiddle: https://jsfiddle.net/ssmp6fx4/Reference: SearchedProduct definiert nicht

Html

<table style="width:100%;"> 
    <tbody> 
     <tr style="background-color: #d3d3d3;"> 
      <td>PRODUCTS</td> 
      <td></td> 
     </tr> 
     <tr class="search-reslut-pro" style="cursor: pointer;" 
       onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" 
       data-name="kaffe" data-price="1"> 
      <td> 
       <div>kaffe</div> 
       <div>1</div> 
      </td> 
      <td>1</td> 
     </tr> 
    </tbody> 
</table>

function SearchedProduct(id) { 
    debugger; 
    var id = $(id).attr('data-id'); 
    var name = $(id).attr('data-name'); 
    var price = $(id).attr('data-price'); 
    var EmployeeID = $(id).attr('data-EmployeeID'); 
}

Ausgabe: auf kaffe Ein Klick sagt: Reference: SearchedProduct ist nicht definiert

Fehle ich etwas?

Quelle

2017-05-20 Pankaj

Setzen Sie 'Javascript' Code in' 'Tag. Könnte sein, dass es dein Problem lösen kann. @Pankaj –

Fügen Sie das jQuery-Plugin hinzu, damit es in Ihrer Fidel läuft. @Tushar –

Das Problem wird der Wert von id Variable sind überschrieben, die auf die Funktion als Argument übergeben wird.

function SearchedProduct(id) { 
         ^^ 
    var id = $(id).attr('data-id'); 
     ^^

Für die folgenden Aussagen ist id eine Zeichenfolge. So wird $(id) kein übereinstimmendes Element auswählen.

function SearchedProduct(el) { 
 
    var id = $(el).attr('data-id'); 
 
    var name = $(el).attr('data-name'); 
 
    var price = $(el).attr('data-price'); 
 
    var EmployeeID = $(el).attr('data-EmployeeID'); 
 

 
    console.log(id, name, price, EmployeeID); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:100%;"> 
 
    <tbody> 
 
    <tr style="background-color: #d3d3d3;"> 
 
     <td>PRODUCTS</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr class="search-reslut-pro" style="cursor: pointer;" onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1"> 
 
     <td> 
 
     <div>kaffe</div> 
 
     <div>1</div> 
 
     </td> 
 
     <td>1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ich schlage vor, Sie jQuery zu verwenden, um Ereignisse auf Elemente zu binden und data() verwenden data-* Attributwert zuzugreifen.

$('.search-reslut-pro').click(function(e) { 
    var id = $(this).data('id'); 
    var name = $(this).data('name'); 
    ... 
});

Quelle

2017-05-20 10:38:15 Tushar

diese aktualisierte Geige Versuchen: https://jsfiddle.net/ssmp6fx4/1/

<table style="width:100%;"> 
    <tbody> 
     <tr style="background-color: #d3d3d3;"> 
      <td>PRODUCTS</td> 
      <td></td> 
     </tr> 
     <tr class="search-reslut-pro" style="cursor: pointer;" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1"> 
      <td> 
       <div>kaffe</div> 
       <div>1</div> 
      </td> 
      <td>1</td> 
     </tr> 
    </tbody> 
</table>

JQuery-Code:

$(".search-reslut-pro").click(function(){ 
    SearchedProduct(this); 
}); 

function SearchedProduct(id) { 
debugger; 
    var id = $(id).attr('data-id'); 
    var name = $(id).attr('data-name'); 
    var price = $(id).attr('data-price'); 
    var EmployeeID = $(id).attr('data-EmployeeID'); 

    alert(id); 
}

Quelle

2017-05-20 10:07:37

Wissen Sie warum die Inline-Funktion nicht funktioniert? – Pankaj

Sie können hier [link] (http://stackoverflow.com/questions/5431351/inline-event-handler-not-working-in-jsfiddle) überprüfen –

Sie haben Ihr JavaScript-Code in head-Tag einfügen und es funktioniert wie erwartet.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <script> 
 
    function SearchedProduct(element) { 
 
     debugger; 
 
     var id = $(element).attr('data-id'); 
 
     var name = $(element).attr('data-name'); 
 
     var price = $(element).attr('data-price'); 
 
     var EmployeeID = $(element).attr('data-EmployeeID'); 
 
     console.log(id); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <table style="width:100%;"> 
 
    <tbody> 
 
     <tr style="background-color: #d3d3d3;"> 
 
     <td>PRODUCTS</td> 
 
     <td></td> 
 
     </tr> 
 
     <tr class="search-reslut-pro" style="cursor: pointer;" onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1"> 
 
     <td> 
 
      <div>kaffe</div> 
 
      <div>1</div> 
 
     </td> 
 
     <td>1</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

Quelle

2017-05-20 10:27:24

Reference: SearchedProduct definiert nicht

Antwort

Verwandte Themen