Question

我有以下功能

      function populateTableData(){
                jQuery('select[name="drg-select"]').change(function() {
                    drgValue=jQuery(this).val();
                    url="http://localhost/url/FetchRecordFromDatabase.php";
                    jQuery.ajax({
                        dataType: "json",
                        type: 'post',
                        url: url,
                        data: {drgValue: drgValue},
                        success:(function(data) {
                            var str = '';
                            jQuery.each(data, function (key, value) {
                                str += '<tr><td id="'+value[0]+'" value="'+value[0]+'">' + value[0] + '</td>'
                                    + '<td id="'+value[1]+'" value="'+value[1]+'">' + value[1] + '</td>'
                                    + '<td id="'+value[2]+'" value="'+value[2]+'">' + value[2] + '</td>'
                                    + '<td id="'+value[3]+'" value="'+value[3]+'">' + value[3] + '</td></tr>';
                            });
                            jQuery('table[name=drg_table] tbody').html(str);
                        })
                    });
                });
            }

和

        function  fetchValuesForDrgDefinition(url,param) {
                jQuery.ajax({
                    type:'post',
                    dataType: "json",
                    url: url,
                    data: {hospital_name:param},
                    success:(function(data) {
                        drawVisualization(data);
                        jQuery('#hospital_title').html(param);
                    })
                });                         
            }

这就是我打电话给他们的方式

          jQuery( document ).ready(function() {
                populateTableData();
                jQuery("table[name='drg_table'] tr td").click(function(){  
                    var hospital_name=jQuery(this).text();
                    fetchValuesForDrgDefinition(urlTable,hospital_name);
                });

            });

问题是当第一次调用以下函数时它们有效，但是如果我第一次触发 populateTableData 然后尝试 fetchValuesForDrgDefinition 事件不会发生。这些函数的P.S事件是独立调用的，但是如果一个接一个地调用，则后面称为donot trigger。

Answer 1

尝试以下方法：

jQuery( document ).ready(function() {
    populateTableData();
    jQuery("table[name='drg_table']").on("click", "tr td", function(){  
        var hospital_name=jQuery(this).text();
        fetchValuesForDrgDefinition(urlTable,hospital_name);
    });
});

出现问题的原因是您正在动态添加td并且事件在它们存在之前被委派。如果表是静态元素，它应该适合您。如果不是静态，则将事件委托给其下一个静态父级（或文档）。

编辑：使用旧版本的jQuery

如果您使用的jQuery版本低于1.7，请使用live函数：

jQuery( document ).ready(function() {
    populateTableData();
    jQuery("table[name='drg_table'] tr td").live("click", function(){  
        var hospital_name=jQuery(this).text();
        fetchValuesForDrgDefinition(urlTable,hospital_name);
    });
});

编辑：与其他图书馆的冲突

如果您使用除jQuery之外的其他库，则可能会发生一些冲突。使用jQuery的noConflict函数来防止这种情况。

在包含jQuery库之后以及包含任何其他库之前，通常最好插入此权限：

<script src="code.jquery.com/jquery-1.9.1.js">
<script>jQuery.noConflict();</script>

Answer 2

您是否尝试使用jquery On进行绑定，如下所示 -

 jQuery("table[name='drg_table'] tr td").on('click',function(){  
                    var hospital_name=jQuery(this).text();
                    fetchValuesForDrgDefinition(urlTable,hospital_name);
});

它适用于非常类似的场景。 DOM元素是动态创建的。

Answer 3

对于动态创建的元素，您需要在文档级别附加事件，以便每当文档在页面上添加元素（在本例中为动态元素）时，它还会附加与其关联的文本。

$(document).on("click", "table[name='drg_table']", function() {
    populateTableData();
    var hospital_name=$(this).text();
    fetchValuesForDrgDefinition(urlTable,hospital_name);
});

在ajax响应Jquery之后事件不会触发

3 个答案: