javascript - 第一次点击后 href 不运行，但 onclick 运行

Question

我有这个按钮可以打开模式。

我正在模态中打开一个新页面，并且在调用新页面之前还进行了另一个 api 调用以进行处理。

<a class="btn btn-primary" type='button' id="btn_prev" onclick="prev({{charm_id}})" data-toggle="modal" data-toggle="modal" data-target="#innerModal" href="{% url 'gifcharm:showpreview' %}">Preview</a>

这是我的按钮元素。

首先，我使用 onclick 进行 api 调用，然后在 onclick 之后，href 加载新页面。

现在，事情是，

当我第一次点击按钮时，onclick 和 href 都有效。 onclick 执行后台处理，href 很好地加载新内容。

但是在第一次调用之后，只有 onclick 起作用，href 调用永远不会进行。由于一段时间后我的内容发生变化，我需要再次调用 href 以加载新内容。

但是相同的旧内容不断加载，而新内容永远不会加载。为什么会这样？

编辑 - 附加的 JS 文件。

function prev( charm_id){
var imageselected=[];
$("input:checkbox").each(function(){
    var $this = $(this);
    if($this.is(":checked")){
        imageselected.push($this.attr("id"));
    }
});

console.log(imageselected);
var url_creategif = "http://localhost:8000/gifcharm/convert_to_gif/" + charm_id;
console.log(url_creategif);

                    jQuery.ajax({
                                type: "GET",
                                url: url_creategif,
                                cache:false,
                                data: {
                                  'images': imageselected
                                },
                                success: function(data){
                                  if(data == "0"){
                                      alert("Problem Creating Gif");
                                  }else{
                                    //alert("Circle Image is successfully created");
                                  }
            }
          });
//url = "http://localhost:8000/gifcharm/showpreview";
};

Answer 1

当同一个标签中既有on-click事件又有href事件时，onclick事件优先。

在您的 prev 函数末尾添加一个 return true; 语句，一旦您完成了其中的所有操作。一旦函数返回 true，href 将执行。如果单击回调不返回任何内容或返回 false，则 href 将被忽略。