кавычки javascript (jquery)-html-php

#php #javascript #jquery #html

#php #javascript #jquery #HTML

Вопрос:

Я стек в таком вопросе:

пример

 <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>
  

выглядит нормально, но в браузере я получаю «Uncaught SyntaxError: неожиданный идентификатор»
в этой строке (список Chrome):

 <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>
  

Пожалуйста, помогите мне — если у кого-то раньше была такая проблема.Где я не прав?
Может быть, будет лучше сделать это через PHP echo (я думаю, что нет :))?

Комментарии:

1. Вы должны отделить JavaScript от HTML. Это назначение вложенного обработчика событий может вызвать только проблемы с кавычками. Похоже, это эта часть send_ajax_settings($(this),'title' ,'3') . Сделайте себе одолжение и напишите поддерживаемый код…

2. Спасибо всем и особенно Эдгару Вильегасу Альварадо.

Ответ №1:

Вы не избежали апостроф в ‘this’ и ‘3’.
Правильная разметка — это:

 <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>
  

Однако такого рода события привязки являются очень плохой практикой и приводят к ошибкам того типа, с которыми вы только что столкнулись. Вы должны сделать это следующим образом:

  <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
  

и имейте это:

    $(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());
      });
    });
  

Таким образом, вы можете разделить javascript и html, и они будут работать для любого количества элементов, динамически генерируемых сервером.

Надеюсь, это поможет. Приветствия

Комментарии:

1. Действительно, очень плохая практика. 1 за предоставление разумного ответа!

Ответ №2:

Я думаю, вам все еще не хватает некоторых экранирований в функции send_ajax, попробуйте это:

 <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>
  

В качестве альтернативы, чтобы все было более управляемо, вы можете заставить onclick вызывать функцию, которая выполняет данный код. Это означает, что вам не нужно так сильно беспокоиться об экранировании и должно быть намного проще для вас.

Комментарии:

1. Я думал о функции onclick раньше, но решил сначала спросить здесь, чтобы убедиться, что это лучший способ разрешить эту «магию» кавычек.:)

2. @user Я опубликовал предложение по хорошо структурированному коду, чтобы у вас больше не возникало проблем с цитированием