jquery - 链接在我的模板上不起作用

Question

我有模板: http://serwer1356363.home.pl/pub/sample2/ (预览)

左边有一张笔记本电脑的图片。在笔记本电脑上有一些点 - 这是链接(我想让它可以点击)。

我想点击页面打开页面(例如mbank.pl、wp.pl)。

怎么做？

我的代码:

<script type="text/javascript">
    var pointCount = 0;
    $(document).ready(function () {

        $(".deleteMyAccount").click(function (e) {
            e.preventDefault();
            $('#dialog').modal('show');
        });
        $(".acceptRemoveAccount").click(function (e) {
            window.location.href = "pl/editPhoto/removeMyAccount?recordId=5";
        });

        if ($('.checkboxHid1').is(':checked')) {
            $(".button_save1").show();
        } else {
            $(".button_save1").hide();
        }
        $('#tags_1').tagsInput({width: 'auto'});
        $('#tags_3').tagsInput({
            width: 'auto',
            autocomplete_url: 'pl/editPhoto/tags'
        });


        $(".checkboxHid1").click(function (event) {
                if ($(this).is(":checked"))
                    $(".button_save1").show();
                else
                    $(".button_save1").hide();
            }
        );


    });

</script>

<div class="modal fade" id="errorWindow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-front-popup">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Proszę uzupełnić wszystkie pola oznaczone gwiazdką!</h4>
            </div>
            <div class="modal-footer modal-dialog-centered">
                <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-front-popup">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Czy na pewno chcesz usunąć to zdjęcie?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                <button type="button" class="btn btn-primary acceptRemoveAccount">Tak, skasuj to zdjęcie teraz</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-front-popup" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold h4_redX">Zarób na dodanym zdjęciu...</h4>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-12">
                    <i class="fas fa-user prefix grey-text"></i>
                    <select class="selectpicker select_type_1 drobne_select1 company_id fullSizeInput radiusInput" name="company_id" required="required">
                        <option value="">Wybierz firmę</option>
                                                        <option  value="1">Firma Główna</option>
                                                </select>
                </div><br/>
                <div class="md-form mb-12">
                    <i class="fas fa-user prefix grey-text"></i>
                    <input type="url" id="form3" class="form-control validate val1 radiusInput url" name="url" placeholder="Wpisz link do produktu*" maxlength="500" required="required">
                </div><br/>
                <div class="md-form mb-12">
                    <i class="fas fa-user prefix grey-text"></i>
                    <input type="text" id="form3" class="form-control validate val1 radiusInput description" name="description" maxlength="200" placeholder="Wpisz nazwę dodawanego produktu*" required="required">
                </div><br/>
                <div class="hide coorX"></div><div class="hide coorY"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default savePointBtn1" data-dismiss="modal">Anuluj</button>
                <button type="button" class="btn btn-primary savePointBtn2 saveBtn">Zapisz</button>
                                </div>
        </div>
    </div>
</div>

<section class="section_100">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ranking_zd  ">
                <div class="dodja1_left" id="image-holder">
                    <div class="scalize maxWidthImg imgpo">
                        <img src="assets/uploads/posts/thumbs/3qGzcIaxNsJrBgtdhMVLn5b0XeRU142Yi6ovuDWyAwpfFKlZm7E9k8HTSPQO.jpg"
                             class="img-responsive center dodja1_left_img target">
                                                        <script>
                                pointCount = pointCount + 1;
                            </script>
                            <div class="item-point" data-top="270"
                                 data-left="212"
                                 id="point42">
                                <div><a target="_blank" href="www.wp.pl" class="toggle tooltips"
                                        title="nazwa" data-placement="top"
                                        data-html="true" rel="tooltip"><span
                                                class="pointFormat">1</span></a></div>
                            </div>
                                                        <script>
                                pointCount = pointCount + 1;
                            </script>
                            <div class="item-point" data-top="70"
                                 data-left="344"
                                 id="point43">
                                <div><a target="_blank" href="www.mbank.pl" class="toggle tooltips"
                                        title="kalesony" data-placement="top"
                                        data-html="true" rel="tooltip"><span
                                                class="pointFormat">2</span></a></div>
                            </div>

                    </div>

                    <div class="usun_konto"><a class="deleteMyAccount"
                                               href="#">usuń to zdjęcie</a></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ranking_zd ">

                <form id="saveForm" method="post" name="contactformXX" class="form validate clearfix validate-form"
                      action="pl/editPhoto?recordId=5"
                      enctype="multipart/form-data">
                    <input type="hidden" name="save" value="1">
                    <input type="hidden" name="recordId" value="5">


                    <select class="selectpicker select_type_1 drobne_select1 " name="category" required="required">
                        <option value="">Wybierz kategorię*</option>
                                                        <option  selected="selected"                                         value="2">Mięsny</option>
                                                        <option                                         value="3">Odzieżowy</option>
                                                        <option                                         value="1">Spożywczy</option>
                                                </select>


                    <div class="form_group_my form_dodaj2">
                        <input type="text" id="tags_3" class="form-control kontakt_input tags" rows="4"
                               id="slowa_kluczowe1"
                               name="tags" placeholder="Wpisz słowa kluczowe*"
                               value="tag 2,tag 3,tag1">
                    </div>


                    <div class="form_group_my form_dodaj2">
                        <textarea required="required" class="form-control kontakt_input" rows="4" id="opis_zd2"
                                  name="description"
                                  placeholder="Dodaj opis zdjęcia*">opis zdjęcia :</textarea>
                    </div>


                    <div class=" padding_29"></div>
                    <br/><br/>
                    <div class="checkbox chackbox_tresc edycja_chcackbox_r">
                        <label>
                            <input type="checkbox" value="1" name="form_req1" disabled checked
                                   class="checkboxHid1">
                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                            Akceptuję
                            <a href="pl/regulamin" target="_blank">
                                <span class="checkbox_color_red">regulamin</span>
                            </a>
                            .
                        </label>
                    </div><br/><br/><br/>


                    <div class="dodaj2_slogan"><span class="h4_red">Zarób na dodanym zdjęciu </span>oznaczając na
                        nim
                        firmę,
                        z której dany produkt pochodzi i dodaj link.
                    </div>


                    <div class="itemsBox">

                                                        <div class="obiect42">
                                <input type="hidden" value="270|212|nazwa|www.wp.pl|1"
                                       name="points[]">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_3 dodaj_top_1">
                                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 ">
                                        <div class="dodaj2_link">
                                            <div class="dodaj2_link_span">1</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10  ">
                                        <div class="dodaj2_link_firma">nazwa</div>
                                        <div class="dodaj2_link_1"><a
                                                    href="www.wp.pl"
                                                    target="_blank">www.wp.pl</a>
                                        </div>
                                    </div>
                                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 ">
                                        <div class="dodaj2_ikon7">
                                            <img src="assets/images/ikon7.png"
                                                 class="img-responsive dodaj2_ikon7_img removeMe"
                                                 id="42">
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <hr class="hr">
                            </div>
                                                        <div class="obiect43">
                                <input type="hidden" value="70|344|kalesony|www.mbank.pl|1"
                                       name="points[]">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_3 dodaj_top_1">
                                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 ">
                                        <div class="dodaj2_link">
                                            <div class="dodaj2_link_span">2</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10  ">
                                        <div class="dodaj2_link_firma">kalesony</div>
                                        <div class="dodaj2_link_1"><a
                                                    href="www.mbank.pl"
                                                    target="_blank">www.mbank.pl</a>
                                        </div>
                                    </div>
                                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 ">
                                        <div class="dodaj2_ikon7">
                                            <img src="assets/images/ikon7.png"
                                                 class="img-responsive dodaj2_ikon7_img removeMe"
                                                 id="43">
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <hr class="hr">
                            </div>

                    </div>


                    <div class="form-group ">
                        <button type="submit"
                                class="btn btn-danger kontakt_button margin_50 button_mop_r_poczta button_save1 hideButton">
                            Zapisz zmiany
                        </button>
                    </div>
                </form>


            </div>


        </div>
    </div>
</section>

<a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm"
   style="display:none"></a>

<script type="text/javascript">
    $(document).ready(function () {

        $('.imgpo').click(function (e) {
            // var posX = $(this).position().left, posY = $(this).position().top;
            // $('.coorX').html((e.pageX - posX - 10));
            // $('.coorY').html((e.pageY - posY - 10));

            var offset = $(this).offset();
            $('.coorX').html((e.pageX - offset.left - 10));
            $('.coorY').html((e.pageY - offset.top - 10));


            $(".tooltip").tooltip("hide");
            $('.formAdd').click();
        });


        $(document).on("click", ".removeMe", function () {
            var number = $(this).attr('id');
            $('#point' + number).remove();
            $('.obiect' + number).remove();
        });


        $('.saveBtn').click(function (e) {

            if ($('.description').val().length == 0 || $('.url').val().length == 0  || $(".company_id option:selected").val().length ==0) {
                // $('#errorWindow').modal('show');
                alert('Proszę uzupełnić wszystkie pola oznaczone gwiazdką!');
                e.preventDefault();
                return false;
            }




            e.preventDefault();

            var url = $(".url").val(); // url
            var description = $(".description").val(); // description
            var company_id = $(".company_id option:selected").val(); // company_id
            var cX = $(".coorX").text();
            var cY = $(".coorY").text();

            var random = (Math.floor(Math.random() * 999999999999)) * 234;

            pointCount = pointCount + 1;


            var newPoint = "<div class='item-point' data-top='" + cY + "' data-left='" + cX + "' id='point" + random + "'>" +
                "<div>" +
                "<a href='"+url+"'  class='toggle tooltips' title='" + description + "'  data-placement='top' data-html='true' rel='tooltip'><span class='pointFormat'>" + pointCount + "</span></a>" +
                "</div>" +
                "</div>";


            var nextObjNumber = $(".itemsBox").children("div").length + 1;

            // var newObject = "<div class='obiect" + random + "'>Obiect " + random +
            //     "<div class='removeMe' id='" + random + "'>X</div>" +
            //     "</div>";


            var newObject = "<div class='obiect" + random + "'>" +
                "<input type='hidden' value='"+ cX +"|"+ cY +"|"+description+"|"+url+"|"+company_id+"' name='points[]'>" +
                "<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_3 dodaj_top_1'>" +
                "<div class='col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 '>" +
                "<div class='dodaj2_link'><div class='dodaj2_link_span'>" + pointCount + "</div>" +
                "</div></div><div class='col-xs-8 col-sm-10 col-md-10 col-lg-10'>" +
                "<div class='dodaj2_link_firma'>"+description+"</div>" +
                "<div class='dodaj2_link_1'><a href='"+url+"' target='_blank'>"+url+"</a></div></div>" +
                "<div class='col-xs-2 col-sm-1 col-md-1 col-lg-1 padding_3 '>" +
                "<div class='dodaj2_ikon7'>" +
                "<img src='assets/images/ikon7.png' class='img-responsive dodaj2_ikon7_img removeMe' id='" + random + "'></div></div></div><div class='clear'></div><hr class='hr'></div>";


            $(".scalize").append(newPoint); // inserting new point
            $(".itemsBox").append(newObject); // inserting new object


            $('.scalize').scalize({
                styleSelector: 'circle',
                animationPopoverIn: 'flipInY',
                animationPopoverOut: 'flipOutY',
                animationSelector: 'pulse2'
            });


            const $tooltip = $('.tooltips');

            $tooltip.tooltip({
                html: true,
                trigger: 'click',
                placement: 'top',
            });

            $tooltip.on('show.bs.tooltip', () => {
                $('.tooltip').not(this).remove();
            });

            $tooltip.on('click', (ev) => {
                ev.stopPropagation();
            });


            $("#modalSubscriptionForm").modal("hide");

            $(".url").val("");
            $(".description").val("");
            $(".company_id").val("").change();
        });


        $('.scalize').scalize({
            styleSelector: 'circle',
            animationPopoverIn: 'flipInY',
            animationPopoverOut: 'flipOutY',
            animationSelector: 'pulse2'
        });

        $('.tooltips').on('click', (ev) => {
            ev.stopPropagation();
        });


    });

    $(function () {
        $(document).tooltip({
            position: {
                my: "center top+20",
                at: "center"
            },
            content: function () {
                return $(this).prop('title');
            }
        });
    });
</script>

为什么不起作用(点击所选页面后不重定向)？

有人知道怎么解决吗？

请帮忙

Answer 1

如果您不在 href 标记的 URL 开头包含“http://”、“https://”，甚至只是“//”，它将被视为相对 URL(例如http://serwer1356363.home.pl/pub/sample2/www.wp.pl ).

将协议(protocol)添加到链接的开头，使链接正常工作。