引用 javascript(jquery)-html-php

Question

I'm stack in such question:

example

<td>
    <span style="cursor:pointer;" onclick="$(this).parent().html('<input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),'title' ,'3')}\'>');">
        <?=$result['settings_title']?>
    </span>
</td>

looks like fine but in browser I get "Uncaught SyntaxError: Unexpected identifier" in this row(chrome listing):

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),'title' ,'3')}\'>');">asdasd</span>

Please, help me - if somebody had such trouble before.Where am I wrong? Maybe will be better do it via PHP echo(I guess not:) )?

Answer 1

I think you are still missing some escapes in the send_ajax function, try this:

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),\'title\' ,\'3\')}\'>');">asdasd</span>

Alternatively to keep things more manageable, you can make the onclick call a function that executes the given code. This means you don't have to worry about escaping so much and should be a lot easier for you.

Answer 2

You didn't escape apostrophes in 'this' and '3'.
The right markup is this:

<span style="cursor:pointer;" onclick="$(this).parent().html('input type=\'text\' value=\'asdasd\' onkeydown=\'javascript:if(char_click(event)==13){send_ajax_settings($(this),\'title\' ,\'3\')}\'>');">asdasd</span>

However, this kind of binding events is a very bad practice, and conduces to the type of mistakes you've just had. You should do it like this:

 <span style="cursor:pointer;" class="spanClass" data-param1="title" data-param2="3">asdasd</span>
 <span style="cursor:pointer;" class="spanClass" data-param1="title2" data-param2="5">asdasd</span>
 ... more spans generated dynamically

and have this:

   $(document).ready(function(){
     $(".spanClass").click(function(){
          var param1 = $(this).attr("data-param1");
          var param2 = $(this).attr("data-param2");
          $('<input type="text" value="asdasd" />').keydown(function(event){
            if(char_click(event)==13) {
               send_ajax_settings($(this), param1 , param2));
            }
          }).appendTo($(this).parent());
      });
    });

So, you can have javascript and html separated, and will work for any amount of elements generated dynamically by the server.

Hope this helps. Cheers