如何检测此单选按钮是否已选中？

Question

我在stackoverflow上阅读了很多东西，但没有任何帮助我:(

我有这个HTML表，由ajax请求加载：

<table class="table table-striped table-hover choix_annonce_table">
    <thead>
        <tr>
            <th>Sélection</th>
            <th>Visuel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" value="45" name="idAnnonce"></td>
            <td><img alt="Annonce 1" src=""></td>
        </tr>
        <tr>
            <td><input type="radio" value="46" name="idAnnonce"></td>
            <td><img alt="Annonce 2" src=""></td>
        </tr>        
    </tbody>
</table>

我尝试检测何时选中单选按钮，但以下所有问题均不起作用（在“主”页面上的js文件中）：

$(document).ready(function() {
    $("input[name=idAnnonce]").click(function(){
        alert("xx");
    });
});

要么

$(document).ready(function() {
    $("input[name=idAnnonce]:radio").change(function () {
        alert("xx");
    });
});

你有主意吗？

编辑：当我使用ajax将JS直接加载到加载的表中时，它可以工作。 为什么呢

Answer 1

发生这种情况是因为.change() .click()和.change()方法以及所有其他事件处理程序仅监视在附加事件时存在的元素上的这些事件。

要解决此问题，请使用以下方法：

$('input[name=idAnnonce]').change(function() {
    // ...
});

使用类似这样的东西：

/* Use 'body' or any element that will contain the form */
$('body').on('change', 'input[name=idAnnonce]', function() {
    // ...
});

这将监视传递到主体的单击事件，并且仅为与选择器匹配的事件调用函数。

Answer 2

如果您的javascript直接加载到html文件中，则在加载和解析html文件时将按行执行。 当javascript位于单独的文件中时，需要对其进行调用。 您可以通过在主体标签语句中执行“ onload”功能来做到这一点。 的那部分html丢失了，因此尚不清楚在加载表时是否实际加载了任何内容。
您也可以在ajax加载结束时通过回调执行这些事件监视器。

Answer 3

通过ajax加载表格时，您需要通过ajax调用引入javascript。 表示其中的表格还应该包含引用该表格的javascript。 父页面上的DOM不了解该表，因此父页面上的javascript不会对新内容起作用。

Answer 4

$(document).ready(function() {
  $('input[type=radio][name=idAnnounce]').change(function(evt) {
  console.log(evt.target.value)
  });
});

您使用的选择器错误。

上面的代码应该有所帮助

干杯