Question

我的html页面上有一个用php生成的按钮：

<button type="button" id="KREDI-CEKIM-TALEP-SIL-BUTTON-cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==" class="btn btn-labeled btn-danger" data-loading-text="iptal ediliyor..."><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>İptal Et</button>

<script>$('#KREDI-CEKIM-TALEP-SIL-BUTTON-cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==').on('click',function(event){alert(1);KrediCekimTalepSilFunc('cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==');});</script>

我正在编写一个onclick事件，但它会在下面生成错误消息：

Uncaught Error: Syntax error, unrecognized expression:
#KREDI-CEKIM-TALEP-SIL-BUTTON-cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==

加载页面时出现错误，而不是点击。

Answer 1

它不是jQuery，它是CSS selector syntax的问题（因为jQuery使用CSS选择器）。 id值包含can't use directly in a CSS id selector字符。您可以转义这些字符，也可以使用getElementById：

$(document.getElementById('KREDI-CEKIM-TALEP-SIL-BUTTON-cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==')).on('click', function(event){
    alert(1);
    KrediCekimTalepSilFunc('cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==');
});

getElementById没有使用CSS选择器，因此CSS选择器语法不会进入它。

但可能更好的是使用符合CSS规则的id。你在评论中说过：

此ID基于数据库中包含的字符串生成。我必须把它隐藏起来。当用户单击此按钮时，ajax post会执行并发送此id。 PHP页面再次解码。

在这种情况下，我会使用data-*属性，如下所示：

<button type="button" id="my-button" data-key="cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==" class="btn btn-labeled btn-danger" data-loading-text="iptal ediliyor..."><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>İptal Et</button>

然后

$("#my-button").on('click', function(event){
    alert(1);
    KrediCekimTalepSilFunc($(this).attr("data-key"));
});

请注意我是如何从KrediCekimTalepSilFunc属性传递给data-key的值，因此不必重复。如果你有其中的几个，你可以在按钮上使用一个类，甚至可以使用委派的选择器：

$("selector-for-container").on('click', '.delete-button', function(event){
    alert(1);
    KrediCekimTalepSilFunc($(this).attr("data-key"));
});

Answer 2

因为在你的长id值中，jquery选择器语法中使用了一些符号。例如+表示下一个兄弟（#a+#b表示选择#b，它是#a的下一个兄弟）。为什么不使用类或其他选择器？或者您可以修改您的ID名称。使用base64代码作为id是很奇怪的。

Answer 3

最好为按钮添加父级并处理您的方案。以下是解决您问题的简单方法。

<div id="ParendID">
<button type="button" id="KREDI-CEKIM-TALEP-SIL-BUTTON-cYSDLtvqnA6U0z600fPJ4crsIwLLZGrJmLpRW/t/j2NUJH4E0S0+3a4U7xQZFsDQ7+PoFzBahrekLFFS4lsyJw==" class="btn btn-labeled btn-danger" data-loading-text="iptal ediliyor..."><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>İptal Et</button>
</div>

<script>
$('#ParendID button').on('click',function(event){
alert(1);
KrediCekimTalepSilFunc(this);});
</script>

JQuery标识符名称限制

3 个答案: