JQuery 标识符名称限制

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 可能会更好。您在评论中说过:

This id is generated based on a string included in database. I must hide it from user. When user clicks this button ajax post executes and sending this id. PHP page is decodes it again.

在这种情况下，我会使用 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"));
});

请注意我如何从 data-key 属性获取要传递给 KrediCekimTalepSilFunc 的值，这样就不必重复该值。如果您有其中几个，您可以在按钮上使用一个类，甚至可能是一个委托(delegate)选择器:

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