Для работы события Jquery нужно дважды щелкнуть элемент - PullRequest
Новая
       1

Для работы события Jquery нужно дважды щелкнуть элемент

0 голосов
/ 27 марта 2019

У меня есть функция ajax, которую я должен дважды щелкнуть, чтобы работать. Я бы хотел, чтобы он работал одним щелчком мыши. Это работало до того, как я добавил событие click, которое проверяет текст того, что я нажимаю, и использует его как часть 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>

Ответы [ 3 ]

3 голосов
/ 27 марта 2019

Это потому, что вы привязываете обработчик jQuery внутри вашей функции onclick - просто удалите весь атрибут 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>
1 голос
/ 27 марта 2019

Проблема состоит в том, что каждый из якорных элементов имеет встроенный обработчик событий, который указывает на 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>
0 голосов
/ 27 марта 2019

Мне удалось заставить это работать, добавив ajaxShow ();в $ (документ) .ready (function ().

Грязно, но работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...