piwik захватывает значение позади динамически генерируемой кнопки загрузки из asp

Question

Веб-сайт разработан в asp.net и позволяет людям выбирать картинки для загрузки. Веб-сайт группирует их вместе, и люди могут нажать кнопку загрузки для каждого изображения.

Поскольку мы никогда не знаем, сколько картинок, которые в конечном итоге будут загружены, кнопка генерируется динамически.

Мне не разрешено изменять код asp.net на сервере только в части piwik...

Проблема в том, что идентификаторы также генерируются динамически. Я пытался с этим:

    $("h2").on("click", "a.button button-dl", function(){
    alert($(this).text());
});

Но не получил результата. В этом случае я хотел бы получить "276173" в переменной.
Я надеюсь, что кто-нибудь может мне помочь, спасибо за чтение Гай

<table class="checkout-basket" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem" style="border-collapse:collapse;">
    <tr>
        <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">Asset</th><th scope="col">&nbsp;</th>
    </tr><tr>
        <td style="width:30px;">
                                    <input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_CbFlag" type="checkbox" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$CbFlag" />
                                </td><td style="width:80px;">
                                    <a onclick="return confirm(&#39;Bent u zeker dat u deze asset wil verwijderen?&#39;);" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_lbDelete" class="button" href="javascript:__doPostBack(&#39;ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$lbDelete&#39;,&#39;&#39;)">verwijder</a>
                                </td><td style="width:100px;">
                                                <img id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_Image1" src="../../cache/images/thumb/3AF267A169AAED70770F0EEE7E74FBB61A526EBB_156.jpg" style="width:80px;border-width:0px;" />
                                            </td>
                                            <td>
                                                <h2>
                                                        <a href='/nl-BE/asset/276173/'>
                                                            276173
                                                        </a>
                                                    </h2>
                                                  <h2>
                                                        <a href='/nl-BE/asset/276173/'>
                                                            20151109_113939_0040
                                                        </a>
                                                    </h2>

                                                <a class="button button-dl" href="javascript:__doPostBack(&#39;ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ctl00&#39;,&#39;&#39;)" style="margin-top: 4px;"><img style="position: relative; top: 4px; right: 5px" src="/images/picto/download.png" />Download</a>
                                </td><td>
                                    <div id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_pnl">

                                        <input type="hidden" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$hfAsset" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_hfAsset" value="276173" />
                                        <span id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint" class="rbl"><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="False" checked="checked" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0">Download</label><br /><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="True" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1">Print</label></span>
                                        <div class="printFormat" style="display: none; padding: 3px 0 3px 20px;">
                                            <select name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ddlPrint" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_ddlPrint">
                <option selected="selected" value="">--</option>
                <option value="9cmx13cm">9cmx13cm</option>
                <option value="10cmx15cm">10cmx15cm</option>
            </select>
                                        </div>

        </div>
                                </td>
    </tr><tr>

В конце концов я нашел решение благодаря ответу ниже.. Это то, что я использовал

    var newstr = "1";
var addressValue = "1";
 $(".button.button-dl").click(function () {
      var addressValue = $(this).attr('href');
      console.log("tweede ",addressValue );
      var re = /'(.*?)'/;
      var re2 = /\$/gi;
    var m = addressValue.match(re);

if (m != null)
    idVal = (m[0].replace(re, '$1'));
    console.log("idVal ",idVal);
     var newstr = idVal.replace(/\$/gi, "_").slice(0,-6)+"_hfAsset";    
    console.log("newstr ",newstr);
    console.log(document.getElementById(newstr).value);
    });

Answer 1

У вас есть проблема иерархии:

Во-первых, проблема CSS: "a.button button-dl" должно быть "a.button.button-dl" (оба класса находятся на теге привязки).

Во-вторых, этот тег привязки не содержится внутри h2так что ваше событие никогда не срабатывает. В лучшем случае вы можете использовать td тег.

Так что ваш JS может выглядеть так:

$("td").on("click", "a.button.button-dl", function () {
    alert($(this).text());
});