如何防止点击超链接后重新加载页面，但重定向到该页面，并找出写在那里的必要代码？ [英] How to prevent reloading of a page after clicking on a hyperlink but redirect to that page and work out the necessary code written over there?

问题描述

我的问题可能听起来很混乱，但实际上并非如此。让我告诉你这些事情。这个场景是我遵循HTML代码：

  / *这是我在这里给出的超链接。许多这样的超链接可以呈现在代表不同问题ID的网页上，其中所述网页代表不同的问题ID * / 
  
 / *以下是jQuery Colorbox弹出窗口的HTML代码。此代码最初保持隐藏状态。* / 
< div class =hidden> 
< div id =fixedPopContentclass =c-popup> 
< h2 class =c-popup-header>问题问题修正< / h2> 
< div class =c-content> 
< h3>是否修正了问​​题报告问题？< / h3> 
< a href =＃class =c-btnid =fixedPop_url>是< / a> 
< a href =＃class =c-btn>否< / a> 
< / div> 
< / div> 
< / div> 
  

现在点击这个超链接，我显示一个弹出窗口（我已经使用jQUery Colorbox弹出这里即使你对这个库不熟悉也没问题。）在这个弹出窗口中有两个按钮是和否。其实这些不是按钮，这些超链接，但显示为使用CSS的按钮。现在我的问题是，当用户点击超链接'是'页面重定向到href属性值并重新加载页面。

其实我想到达href属性中提到的页面，但页面不应该重新加载或刷新。如何实现这一目标？以下是用于弹出colorbox的jQuery代码以及弹出窗口中的是和否按钮。我已经尝试了这么多，但它对我没有用。

我的代码如下：

 <$ c $（$）$（$）$（this）.attr（'delhref' ）; 
 var qid = $（this）.data（'q_id'）; 
 
 $（'＃fixedPop_url'）。attr（'href'，action_url1）; 
 $（。fixed）。colorbox（{inline：true，width：666}）; 
 
 $（＃fixedPop_url）。click（function（event）{
 event。 preventDefault（）; 
 $（＃fix _+ qid）.hide（）; 
 $（＃notfix _+ qid）.show（）; 
}）; 
 
 $（。c-btn）。bind（'click'，function（）{
 $ .colorbox.close（）; 
}）; 
}） ; 
}）; 
  

解决方案

所以你需要在url上加载页面，但是不能导航到它。

您可以使用 <$ c

所以在你的情况下，让我们说你的弹出容器div类是 .popup ，并且您想要加载url内容的div有一个标识 #container 。

$ （'click'，function（e）{
e.preventDefault（）; $（$。$ popup $）。
$ b

  b $ b var url = $（this）.attr（'delhref'）; 
 
 $（＃container）。load（url）; 
 
}）; 
  

有几件事值得记住，

1. 这对大多数指向任何其他域的网址都不起作用。 （同源策略）


2. 任何使用此函数加载的内容（ .load（））都应插入到容器中，如果有的话将被执行。

My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:

/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>

/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
  <div id="fixedPopContent" class="c-popup">
    <h2 class="c-popup-header">Question Issue Fix</h2>
    <div class="c-content">         
      <h3>Is question reported issue fixed?</h3>
      <a href="#"class="c-btn" id="fixedPop_url">Yes</a>
      <a href="#"class="c-btn">No</a> 
    </div>
  </div>
</div>

Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.

Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.

My code is as follows:

$(document).ready(function()  {
  $(".fixed").click(function(e) { 
    var action_url1 = $(this).attr('delhref');
    var qid = $(this).data('q_id');

    $('#fixedPop_url').attr('href', action_url1);
    $(".fixed").colorbox({inline:true, width:666});

    $("#fixedPop_url").click(function(event) {
       event.preventDefault();
      $("#fix_"+qid).hide();
      $("#notfix_"+qid).show();
    });       

    $(".c-btn").bind('click', function(){
      $.colorbox.close();
    });
  });
});

解决方案

So you need to load the page at the url but not navigate to it.

You can use .load() .

So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.

$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');

$("#container").load(url);

});

Few things to keep in mind,

1. This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
2. Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.

这篇关于如何防止点击超链接后重新加载页面，但重定向到该页面，并找出写在那里的必要代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！