无法删除单击特定按钮的元素

时间:2019-08-29 19:21:08

标签: javascript jquery

我为交易平台构建了一个用户界面。在放置可拖动小部件进行订单放置的位置,它可能是“买卖订单”。两个按钮的购买和出售类别相同。也有另一个“取消”按钮。全部当尝试删除小部件的代码时,当它是Sell小部件时出现错误。

单击“购买和取消”按钮时,一切正常。购买后,小部件代码已正确删除。但是,当在Sell Widget上尝试相同的操作时,所有功能都会被触发,但无法删除小部件代码。我要在下订单后销毁该窗口。我可以单击“取消”按钮销毁代码。下订单后触发相同代码时,它不起作用。

代码在控制台中也可以正常工作。任何人都可以建议我该怎么做?

    $(document).on('click', '.actions .button-orange', function(){
    //

    if (style== null||style== 'undefined') {
        style = 'top: 141px; left: 413px; width: 550px; height: 277px; z-index: 1; opacity: 1;'
    }
    $('.vdr').attr('style', style);
    $('.vdr').addClass('active');
    $('.vdr').html(sellButton);
    trans = 'sell';


});
$(document).on('click', '.actions .button-blue', function(){
    //

    if (style== null||style== 'undefined') {
        style = 'top: 141px; left: 413px; width: 550px; height: 277px; z-index: 1; opacity: 1;'
    }
    $('.vdr').attr('style', style);
    $('.vdr').addClass('active');
    $('.vdr').html(buyButton);
    trans = 'buy';

});

$(document).on('click', '.place', function() {
  var trans = $.trim($('.transaction-type').html());
  if (trans == 'sell') {
    sellOrderExec(); //executing
    $('.order-window-draggable').html(''); //not executing
    console.log("working");//prints 'working' in the console
  } else if (trans == 'buy') {
    buyOrderExec(); //executing
    $('.order-window-draggable').html(''); //executing
  }
})

这是html for buy form小部件

<div class="order-window-cover buy variety-regular">
  <div class="draggable-area"></div>
  <form class="order-window buy">
    <div class="dock"> <span class="icon icon-full"></span> </div>
    <div class="head row buy">
      <div class="nine columns">
        <div class="instruments-info"> <span class="transaction-type">buy</span> <span class="tradingsymbol">                                          SBIN                                    </span> <span class="quantity">× 1 Qty</span>
        </div>
        <div class="last-price"> <span>₹</span>284.9 on NSE </div>
      </div>
      <div class="three columns text-right transaction-type-switch">
        <div class="su-switch-group">
          <input id="switch-1455" type="checkbox" stateon="SELL" stateoff="BUY" label="" class="su-switch" value="BUY"> <label for="switch-1455" class="su-switch-control"></label>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="row row-1">
        <div class="four columns">
          <div class="su-radio-group products">
            <div class="product su-radio-wrap" rules="[object Object]" data-balloon="Intraday squareoff with extra leverage" data-balloon-pos="up"> <input id="radio-1457" type="radio" title="Intraday squareoff with extra leverage" label="MIS" class="su-radio" value="MIS"> <label for="radio-1457" class="su-radio-label">MIS</label> </div>
            <div class="product su-radio-wrap" rules="[object Object]" data-balloon="Cash and carry. Delivery based trades" data-balloon-pos="up"> <input id="radio-1458" type="radio" title="Cash and carry. Delivery based trades" label="CNC" class="su-radio" value="CNC"> <label for="radio-1458" class="su-radio-label">CNC</label> </div>
          </div>
        </div>
        <div class="eight columns text-right">
          <div class="su-radio-group order-types">
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Market" data-balloon-pos="up"> <input id="radio-1460" type="radio" title="Market" label="MARKET" class="su-radio" value="MARKET"> <label for="radio-1460" class="su-radio-label">MARKET</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Limit" data-balloon-pos="up"> <input id="radio-1461" type="radio" title="Limit" label="LIMIT" class="su-radio" value="LIMIT"> <label for="radio-1461" class="su-radio-label">LIMIT</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Stoploss" data-balloon-pos="up"> <input id="radio-1462" type="radio" title="Stoploss" label="SL" class="su-radio" value="SL"> <label for="radio-1462" class="su-radio-label">SL</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Stoploss market" data-balloon-pos="up"> <input id="radio-1463" type="radio" title="Stoploss market" label="SL-M" class="su-radio" value="SL-M"> <label for="radio-1463" class="su-radio-label">SL-M</label> </div>
          </div>
        </div>
      </div>
      <div class="row row-2">
        <div prop="quantity" class="quantity input-field three columns">
          <div class="su-input-group su-static-label"> <label class="su-input-label su-visible">Qty.</label> <input type="number" placeholder="" autocorrect="off" min="1" step="1" noerror="true" staticlabel="true" animate="true" label="Qty." rules="[object Object],[object Object],[object Object]"
              dynamicwidthsize="8">
          </div>
        </div>
        <div prop="price" class="price input-field three columns">
          <div class="su-input-group su-static-label disabled"> <label class="su-input-label">Price</label> <input type="number" placeholder="" autocorrect="off" min="0" step="0.05" disabled="disabled" noerror="true" staticlabel="true" animate="true" label="Price" rules="[object Object]" dynamicwidthsize="8">
          </div>
        </div>
        <div prop="triggerPrice" class="trigger-price input-field three columns">
          <div class="su-input-group su-static-label disabled"> <label class="su-input-label">Trigger price</label> <input type="number" placeholder="" autocorrect="off" min="0" step="0.05" disabled="disabled" noerror="true" staticlabel="true" animate="true" label="Trigger price" rules="[object Object],[object Object]" dynamicwidthsize="8">
          </div>
        </div>
        <div prop="disclosedQuantity" class="disclosed-quantity input-field three columns">
          <div class="su-input-group su-static-label"> <label class="su-input-label">Disclosed qty.</label> <input type="number" placeholder="" autocorrect="off" min="0" step="1" noerror="true" staticlabel="true" animate="true" label="Disclosed qty." rules="[object Object],[object Object]" dynamicwidthsize="8">
          </div>
        </div>
      </div>
      <div class="row row-4">
        <div class="advanced-options-toggle seven columns">   
          <a href="#" class="text-xsmall">
            More options
            <span class="icon icon-chevron-down"></span>                                    
          </a>
        </div>
        <div class="actions five columns text-right"> 
          <button type="submit" class="place button-blue">
            <span>Buy</span>
            <button type="button" class="button-outline cancel">Cancel</button> 
          </div>
      </div>
    </div>
  </form>
</div>

这是“销售表格窗口”的代码

<div class="order-window-cover sell variety-regular">
  <div class="draggable-area"></div>
  <form class="order-window sell">
    <div class="dock"> <span class="icon icon-full"></span> </div>
    <div class="head row sell">
      <div class="nine columns">
        <div class="instruments-info"> 
          <span class="transaction-type">sell</span> 
          <span class="tradingsymbol">SRTRANSFIN</span> 
          <span class="quantity">× 1 Qty</span>
        </div>
        <div class="last-price"> <span>₹</span>967.15 on NSE </div>
      </div>
      <div class="three columns text-right transaction-type-switch">
        <div class="su-switch-group">
          <input id="switch-532" type="checkbox" stateon="SELL" stateoff="BUY" label="" class="su-switch" value="SELL" checked="checked"> 
          <label for="switch-532" class="su-switch-control"></label>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="row row-1">
        <div class="four columns">
          <div class="su-radio-group products">
            <div class="product su-radio-wrap" rules="[object Object]" data-balloon="Intraday squareoff with extra leverage" data-balloon-pos="up"> <input id="radio-534" type="radio" title="Intraday squareoff with extra leverage" label="MIS" class="su-radio" value="MIS"> <label for="radio-534" class="su-radio-label">MIS</label> </div>
            <div class="product su-radio-wrap" rules="[object Object]" data-balloon="Cash and carry. Delivery based trades" data-balloon-pos="up"> <input id="radio-535" type="radio" title="Cash and carry. Delivery based trades" label="CNC" class="su-radio" value="CNC"> <label for="radio-535" class="su-radio-label">CNC</label> </div>
          </div>
        </div>
        <div class="eight columns text-right">
          <div class="su-radio-group order-types">
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Market" data-balloon-pos="up"> <input id="radio-537" type="radio" title="Market" label="MARKET" class="su-radio" value="MARKET"> <label for="radio-537" class="su-radio-label">MARKET</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Limit" data-balloon-pos="up"> <input id="radio-538" type="radio" title="Limit" label="LIMIT" class="su-radio" value="LIMIT"> <label for="radio-538" class="su-radio-label">LIMIT</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Stoploss" data-balloon-pos="up"> <input id="radio-539" type="radio" title="Stoploss" label="SL" class="su-radio" value="SL"> <label for="radio-539" class="su-radio-label">SL</label> </div>
            <div class="order-type su-radio-wrap" rules="[object Object]" data-balloon="Stoploss market" data-balloon-pos="up"> <input id="radio-540" type="radio" title="Stoploss market" label="SL-M" class="su-radio" value="SL-M"> <label for="radio-540" class="su-radio-label">SL-M</label> </div>
          </div>
        </div>
      </div>
      <div class="row row-2">
        <div prop="quantity" class="quantity input-field three columns">
          <div class="su-input-group su-static-label"> <label class="su-input-label su-visible">Qty.</label> <input type="number" placeholder="" autocorrect="off" min="1" step="1" noerror="true" staticlabel="true" animate="true" label="Qty." rules="[object Object],[object Object],[object Object]" dynamicwidthsize="8">
          </div>
        </div>
        <div prop="price" class="price input-field three columns">
          <div class="su-input-group su-static-label disabled"> <label class="su-input-label">Price</label> <input type="number" placeholder="" autocorrect="off" min="0" step="0.05" disabled="disabled" noerror="true" staticlabel="true" animate="true" label="Price" rules="[object Object]" dynamicwidthsize="8">
          </div>
        </div>
        <div prop="triggerPrice" class="trigger-price input-field three columns">
          <div class="su-input-group su-static-label disabled"> <label class="su-input-label">Trigger price</label> <input type="number" placeholder="" autocorrect="off" min="0" step="0.05" disabled="disabled" noerror="true" staticlabel="true" animate="true" label="Trigger price" rules="[object Object],[object Object]" dynamicwidthsize="8">
          </div>
        </div>
        <div prop="disclosedQuantity" class="disclosed-quantity input-field three columns">
          <div class="su-input-group su-static-label"> <label class="su-input-label">Disclosed qty.</label> <input type="number" placeholder="" autocorrect="off" min="0" step="1" noerror="true" staticlabel="true" animate="true" label="Disclosed qty." rules="[object Object],[object Object]" dynamicwidthsize="8">
          </div>
        </div>
      </div>
      <div class="row row-4">
        <div class="advanced-options-toggle seven columns"> <a href="#" class="text-xsmall">            More options             <span class="icon icon-chevron-down"></span>          </a>
        </div>
        <div class="actions five columns text-right"> <button type="submit" class="place button-orange">            <span>Sell</span>   </button>
          <button type="button" class="button-outline cancel">Cancel</button> </div>
      </div>
    </div>
  </form>
</div>

这是动态添加这些代码的div

<div data-v-130adaec="" class="vdr order-window-draggable active" style="top: 108px; left: 615px; width: 550px; height: 277px; z-index: 1; opacity: 1;"></div>

1 个答案:

答案 0 :(得分:0)

我发现了错误。它触发了按钮的其他类的另一个功能,那就是我没有获得所有属性。感谢所有人