#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 Я опубликовал предложение по хорошо структурированному коду, чтобы у вас больше не возникало проблем с цитированием