如何在jquery中的onclick中传递参数

Question

The code below is calling In index.html

    <script src="js/jquery/jquery-1.8.2.min.js"></script>
    <script src="js/px.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var newGame = new px1("black");
        new px1Generator(newGame);
    </script>

the code below is in px.js

var px1 = function (color) {
   if (color == "white") {
        this.x = "100";
   } else if (color == "black") {
        this.x = "900";
   }};
var px1Generator= function (px1obj) {
    for (i = 0; i < 10; i++) {
        $("#mainGame").append("<div class='pawn white'></div>");
    }
    //for 10 object upon add onClickEvent
    $(".pawn.white").on("click", function (event, px1obj) {
       alert(px1obj.x)
    });
};

I want to send 100 or 900 to onclick function, how to do it ? The error accord when user clicks on divs

Answer 1

You have two issues here. Firstly, when you run your code right now you'll see this error:

Uncaught TypeError: px1 is not a constructor

This is because you're trying to instantiate the function before it exists. You need to either define your functions first, or change to use explicit function definitions.

Secondly, the problem itself it because you've redefined px1obj as a parameter on the click event handler which will never be defined. This hides the px1obj defined in the outser scope. To fix this simply remove that parameter from the event handler:

 var newGame = new px1("black"); new px1Generator(newGame); function px1(color) { if (color == "white") { this.x = "100"; } else if (color == "black") { this.x = "900"; } }; function px1Generator(px1obj) { for (i = 0; i < 10; i++) { $("#mainGame").append("<div class='pawn white'></div>"); } //for 10 object upon add onClickEvent $(".pawn.white").on("click", function(e) { console.log(px1obj.x) }); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="pawn white">pawn white</div> 

Answer 2

You need to remove the px1obj param from the on click callback function signature, because you are overriding it.

px1obj already exists in the px1Generator function scope, and you are overriding it inside the onclick callback scope.

 $(function() { function px1(color) { if (color == "white") { this.x = "100"; } else if (color == "black") { this.x = "900"; }}; function px1Generator(px1obj) { for (i = 0; i < 10; i++) { $("#mainGame").append("<div class='pawn white'>a</div>"); } //for 10 object upon add onClickEvent $(".pawn.white").on("click", function (event) { console.log(px1obj.x) }); }; var a = new px1("black"); px1Generator(a); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mainGame"></div>