Question

我有一个ajax函数，必须单击两次才能工作。我希望它只需单击一下即可工作。在添加单击事件以检查我所单击的文本并将其用作URL的一部分之前，它一直在工作。我的问题可能在那儿。我需要对可能出什么问题有新的看法。

jQuery：

function ajaxShow(){    
        $('#formats a').click(function(e) {
          var txt = $(e.target).text();
          console.log(txt);

    $.ajax({
        url : "./enablereports/" + txt + ".html",
        data: "html",
        contentType:"application/x-javascript; charset:ISO-8859-1",
            beforeSend: function(jqXHR) {
            jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
            },
        success : function (data) {
            $("#rightDiv").html(data);
        }
    });
            });

}

HTML：

   <body>
    <div id="wrapper">
        <div id="enablestuff" class="yellowblock">
            <h3 id="title" class="header">Enable Formats</h3>
        </div>
        <div id="formats" class="lightorangeblock">
            <a href="" onclick="ajaxShow();event.preventDefault()">ADDSTAMP</a><br>
            <a href="" onclick="ajaxShow();event.preventDefault()">SCLGLDNB</a><br>
            <a href="" onclick="ajaxShow();event.preventDefault()">SCLGLVNB</a><br>

        </div>

    </div>      

    <div id="rightWrap">
       <div id="rightDiv">
       </div>
    </div>

   </body>

Answer 1

这是因为您要在onclick函数内部绑定jQuery处理程序-只需删除整个onclick属性并在函数外部绑定处理程序即可。

$('#formats a').click(function(e) {
    e.preventDefault();

    var txt = $(e.target).text();
    console.log(txt);

    $.ajax({
        url : "./enablereports/" + txt + ".html",
        data: "html",
        contentType:"application/x-javascript; charset:ISO-8859-1",
            beforeSend: function(jqXHR) {
            jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
            },
        success : function (data) {
            $("#rightDiv").html(data);
        }
    });
});

和HTML

<div id="formats" class="lightorangeblock">
    <a href="">ADDSTAMP</a><br>
    <a href="">SCLGLDNB</a><br>
    <a href="">SCLGLVNB</a><br> 
</div>

Answer 2

问题在于每个锚点元素都有一个指向ajaxShow的内联事件处理程序，该事件处理程序然后为以后的点击设置了实际的事件处理程序。

相反，消除内联处理程序，只设置没有ajaxShow包装程序的实际处理程序即可。

我还建议您不要使用<a>元素，因为您实际上并没有在任何地方导航，因此该元素的使用在语义上是不正确的，并且会给依赖辅助技术的人带来麻烦网络。相反，由于您希望在每个“链接”之间插入换行符，因此请使用<div>元素并将其样式设置为看起来像链接。

最后，您在最后一个name元素之一上使用了div属性，但是name仅在表单字段上有效。如果需要，可以给它一个id。

$('#formats div').click(function(e) {
   var txt = $(e.target).text();
   console.log(txt);

   $.ajax({
    url : "./enablereports/" + txt + ".html",
    data: "html",
    contentType:"application/x-javascript; charset:ISO-8859-1",
    	beforeSend: function(jqXHR) {
    	  jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
    	},
    	success : function (data) {
    		$("#rightDiv").html(data);
    	}
    });	
});

#formats div { text-decoration:underline; color:blue; cursor:pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper">
	<div id="enablestuff" class="yellowblock">
		<h3 id="title" class="header">Enable Formats</h3>
	</div>
	<div id="formats" class="lightorangeblock">
		<div>ADDSTAMP</div>
		<div>SCLGLDNB</div>
		<div>SCLGLVNB</div>	
	</div>
</div>		
<div id="rightWrap">
  <div id="rightDiv"></div>
</div>

Answer 3

我可以通过添加ajaxShow（）来使它工作。放入$（document）.ready（function（）。

肮脏，但是可以。

必须单击两次元素才能使Jquery事件起作用

3 个答案: