jQuery .on click syntax error

[wjrasmussen]

Getting a Syntax Error: missing ) after argument list.

All I want to do is make each item returned from the getJSON call to have a click event. For example. when someone clicks on an item, it might bring up a full list of details about an item. So it seems I have to pass information to the function.

$.getJSON("getproducts.php", function (json) {
    $.each(json.products, function (i, val) {
        var prodinfo = '<li>' + this['productname'] + '</li>';
        var prodcode = val.productcode;
        var sellerid = val.sellerid;
        var ordernum = val.ordernum;
        $('#productsdiv').append($('<li></li>')
            .append($('<p></p>')
            .text(val.productname)
            .hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        })

            .on("click", {
            prodcode: prodcode,
            sellerid: sellerid,
            ordernum: ordernum
        }, salesorder);))

    })
});

[VIPStephan]

Use JSHint or a similar lint tool, it shows you issues with your code.

Let’s format your code a little better so it’s easier to read:

PHP Code:

$('#productsdiv').append(
  $('<li></li>').append(
    $('<p></p>')
      .text(val.productname)
      .hover(
        function () {$(this).addClass('hover');},
        function () {$(this).removeClass('hover');}
      )
      .on("click", {
        prodcode: prodcode,
        sellerid: sellerid,
        ordernum: ordernum
      }, salesorder); // end on()
    ) // end append()
  ) // end append() 


It’s hard to spot but actually quite logical: The semicolon after salesorder) is wrong as it’s inside the append() function.

However, you could have saved all that hassle if you wrote your code a little more effectively:

PHP Code:


$('#productsdiv').append(
  $('<li>').append(
    $('<p>', {
      text: val.productname,
      hover: function() {$(this).toggleClass('hover');},
      click: function() {
        // do stuff on click
      }
    }) // end <p>
  ) // end append()
) // end append() 


[wjrasmussen]

Originally Posted by VIPStephan

Use JSHint or a similar lint tool, it shows you issues with your code.

Let’s format your code a little better so it’s easier to read:

PHP Code:

$('#productsdiv').append(
  $('<li></li>').append(
    $('<p></p>')
      .text(val.productname)
      .hover(
        function () {$(this).addClass('hover');},
        function () {$(this).removeClass('hover');}
      )
      .on("click", {
        prodcode: prodcode,
        sellerid: sellerid,
        ordernum: ordernum
      }, salesorder); // end on()
    ) // end append()
  ) // end append() 


It’s hard to spot but actually quite logical: The semicolon after salesorder) is wrong as it’s inside the append() function.

However, you could have saved all that hassle if you wrote your code a little more effectively:

PHP Code:


$('#productsdiv').append(
  $('<li>').append(
    $('<p>', {
      text: val.productname,
      hover: function() {$(this).toggleClass('hover');},
      click: function() {
        // do stuff on click
      }
    }) // end <p>
  ) // end append()
) // end append() 


I should have left the hover off as it isn't part of what I want. I used a beautifier to clean up the code and pasted it. So that's their issue.

My real problem is with the .on. What doesn't that work?

Thanks for the jshint. I fixed the issue in the real code!